A question about plugins, browsers and styling

Post Reply
RussianWhiskey
Jr. Bludit
Posts: 5
Joined: Tue Feb 05, 2019 2:11 pm

I'm using the Clean Blog theme.
I've never before worked with any kind of code.
My goal was to to add tags to display horizontally at the footer on all the pages.
So I've created a page which contains this code which I found in this community

Code: Select all

<?php
    // Class name of the plugin
    $className = 'pluginTags';

    // Get the Plugin-Object
    $plugin = getPlugin($className);

    // Print the plugin label
    echo $plugin->label();

    // Execute the hook siteSidebar of the plugin and print it
    echo $plugin->siteSidebar();
?>
And then I've inserted this code above social networks in the index.php

Code: Select all

<?php
include(THEME_DIR_PHP.'tags.php');		
 ?>
That worked, but I had to fix the styling. And that's probably where i start to look stupid.
I found this code online and changed it a bit, then added it to the css file.

Code: Select all

ul.tags {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  padding-bottom: 15px;
  overflow: hidden;
  background-color: #FFFFFF;
  text-align: center;
}

li.tag {
  display: inline-block;
}

li.tag a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
}

li.tag a:hover:not(.active) {
  background-color: none;
  color: #0085a1;
}
And then I edited this bit in plugin.php so it looks like:

Code: Select all

$html .= '<ul class="tags">';

		// By default the database of tags are alphanumeric sorted
		foreach( $tags->db as $key=>$fields ) {
			$html .= '<li class="tag">';
			$html .= '<a href="'.DOMAIN_TAGS.$key.'">';
			$html .= $fields['name'];
			$html .= '</a>';
			$html .= '</li>';
		}
		   

		$html .= '</ul>';
That seemed to work like i wanted it in Firefox, Opera and Edge. But it doesn't work in Chrome. It's as if the Chrome doesn't read all of the css code I've added. I've attached some screenshots of what it looks like in Firefox and Chrome.
I also noticed that when I changed footer padding, Firefox displayed the changes correctly, but it didn't make any difference in Chrome. If I open up the Chrome inspector and find footer padding, the value is not corresponding to what's in the css file.
Am I doing something wrong?
Attachments
Chrome1.jpg
Chrome1.jpg (19.64 KiB) Viewed 3675 times
Firefox.jpg
Firefox.jpg (21.09 KiB) Viewed 3675 times
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Can you please post the URL of the website. This would make it easier to help.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
RussianWhiskey
Jr. Bludit
Posts: 5
Joined: Tue Feb 05, 2019 2:11 pm

Actually it is fixed already.
It had something to do with Chrome caching the website. I checked it from my laptop and it was fine. Then cleared the cache on my pc and everything is fine now. :D Thanks though.

But I have another question now. How can I add other social network links and icons? For example telegram or VK.
RussianWhiskey
Jr. Bludit
Posts: 5
Joined: Tue Feb 05, 2019 2:11 pm

And also the images in the posts look sort of squished when I access the site from mobile. And the larger the size of the image in the post, the more squished it is. Is there something I can do with that?
User avatar
bayerberg
Master Bludit
Posts: 141
Joined: Wed Jun 07, 2017 1:05 pm
Location: London, UK
Has thanked: 7 times
Been thanked: 10 times
Contact:

you can amend that with css :

Code: Select all

@media only screen and (max-width:768px) {
  img {
	width:100%
	height:auto; 
  }
}
change img to a class you use for styling post images
bludit plugins and themes - makeitblu | I do things, check them out on behance and dribbble.
RussianWhiskey
Jr. Bludit
Posts: 5
Joined: Tue Feb 05, 2019 2:11 pm

That worked. Thanks!
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

RussianWhiskey wrote: Thu Feb 07, 2019 9:22 am How can I add other social network links and icons? For example telegram or VK.
The easiest way is to use a field that is not yet used (for example CodePen) and to change in the theme the character of the related output.

In most of the cases it is FontAwesome. The code can be found here:

https://fontawesome.com/icons?d=gallery
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
RussianWhiskey
Jr. Bludit
Posts: 5
Joined: Tue Feb 05, 2019 2:11 pm

Thanks. I'll try that.
User avatar
LRAM
Master Bludit
Posts: 199
Joined: Sat Sep 24, 2016 4:02 pm
Location: France
Has thanked: 22 times
Been thanked: 2 times
Contact:

Edi wrote: Fri Feb 08, 2019 10:43 am
RussianWhiskey wrote: Thu Feb 07, 2019 9:22 am How can I add other social network links and icons? For example telegram or VK.
The easiest way is to use a field that is not yet used (for example CodePen) and to change in the theme the character of the related output.

In most of the cases it is FontAwesome. The code can be found here:

https://fontawesome.com/icons?d=gallery
That's what I did on my website, works like a charm
https://sucrepop.com
Candies for the ears
Post Reply