Page 1 of 1

A question about plugins, browsers and styling

Posted: Wed Feb 06, 2019 10:19 pm
by RussianWhiskey
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?

Re: A question about plugins, browsers and styling

Posted: Wed Feb 06, 2019 11:49 pm
by Edi
Can you please post the URL of the website. This would make it easier to help.

Re: A question about plugins, browsers and styling

Posted: Thu Feb 07, 2019 9:22 am
by RussianWhiskey
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.

Re: A question about plugins, browsers and styling

Posted: Thu Feb 07, 2019 2:54 pm
by RussianWhiskey
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?

Re: A question about plugins, browsers and styling

Posted: Thu Feb 07, 2019 4:29 pm
by bayerberg
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

Re: A question about plugins, browsers and styling

Posted: Thu Feb 07, 2019 4:56 pm
by RussianWhiskey
That worked. Thanks!

Re: A question about plugins, browsers and styling

Posted: Fri Feb 08, 2019 10:43 am
by Edi
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

Re: A question about plugins, browsers and styling

Posted: Fri Feb 08, 2019 11:18 pm
by RussianWhiskey
Thanks. I'll try that.

Re: A question about plugins, browsers and styling

Posted: Mon Feb 18, 2019 9:43 am
by LRAM
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