A question about plugins, browsers and styling

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

Wed Feb 06, 2019 10:19 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 649 times
Firefox.jpg
Firefox.jpg (21.09 KiB) Viewed 649 times
User avatar
Edi
Site Admin
Posts: 1567
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Wed Feb 06, 2019 11:49 pm

Can you please post the URL of the website. This would make it easier to help.
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
RussianWhiskey
Jr. Bludit
Posts: 5
Joined: Tue Feb 05, 2019 2:11 pm

Thu Feb 07, 2019 9:22 am

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

Thu Feb 07, 2019 2:54 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: 110
Joined: Wed Jun 07, 2017 1:05 pm
Contact:

Thu Feb 07, 2019 4:29 pm

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 | check out startups undiluted - london's startup ecosystem
RussianWhiskey
Jr. Bludit
Posts: 5
Joined: Tue Feb 05, 2019 2:11 pm

Thu Feb 07, 2019 4:56 pm

That worked. Thanks!
User avatar
Edi
Site Admin
Posts: 1567
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

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
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
RussianWhiskey
Jr. Bludit
Posts: 5
Joined: Tue Feb 05, 2019 2:11 pm

Fri Feb 08, 2019 11:18 pm

Thanks. I'll try that.
User avatar
LRAM
Master Bludit
Posts: 122
Joined: Sat Sep 24, 2016 4:02 pm
Location: France
Contact:

Mon Feb 18, 2019 9:43 am

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
Post Reply