Tag: css

Gallery tags not working

Db0

So I’ve managed to fix the latest problem that stumped me. This was related to my latest WordPress-WPG2-Gallery combo installation and it was the fact that for some reason the Gallery tag plugin just refused to display the tag cloud correctly. No matter what I tried, the tag cloud always displayed as a list on the blog, (separated by a line, one under the other etc) instead of an inline big & small tag cloud you would expect. Not only that but anything I tried in order to fix this on the WP theme stylesheet did not work. I even tried disabling everything that had to do with <ul> and <li> tags and the damn thing still persists.

What was even more enraging was that by directly accessing the gallery the tag cloud would work as expected, colours and all. Exasperating.

So I spend the whole afternoon and I did manage to fix the tag cloud. I had to use the style injection box that is provided by the WPG2 plugin in order to put the style code that forced list items to be put inline and without line separators. However, no matter what I tried, I could not make the colours change.

Hopefully, while I was lying in bed, it clicked for me. I must have been the gallery theme I was using, wordpress embedded, which makes the gallery fit to your WP theme. However for some reason, the designer has hard coded the font and link colour to the theme, which as a result of being loaded after the WP theme, took precedence. This is the reason why my links had that ugly blue colour and my tag colours would not work. By commenting the colour lines for the <body> and the <a> tags, I was able to force the gallery theme to submit to the WP theme selections.

Just in case anyone is wondering, the stylesheet code I put in my WPG2 Output – Element header textbox is

.g2_column {
width: 100%;
margin: 0px 1px 0px 12px;
}

.tag1 {
display: inline;
background:none;
font-size:8px;}
.tag1 a {color: #828282;}

.tag2 {
display: inline;
background:none;
font-size:11px;}
.tag2 a {color: #AC6FCF;}

.tag3 {
display: inline;
background:none;
font-size:14px;}
.tag3 a {color: #00659C;}

.tag4 {
display: inline;
background:none;
font-size:18px;}
.tag4 a {color: #008200;}

.tag5 {
display: inline;
background:none;
font-size:22px;}
.tag5 a {color: #FFCB21;}

.tag6 {
display: inline;
background:none;
font-size:26px;}
.tag6 a {color: #FF0000;}

.tag7 {
display: inline;
background:none;
font-size:30px;}
.tag7 a {color: #1acdb6;}

Where tag1-7 is the class that the Gallery2 tag plugin uses for each level of tag (based on the quantity)

PS: Yes, I have insomnia again…

Css wrangling

Db02 Comments

I have finally implemented drop-down menus on the navigation bar. This should make page navigation that much easier I hope. Now I can remove the pages from the navigation bar and fill it with something more interesting (No idea what though)

It took me a few hours until I got everything done. Initially I was trying to figure it out myself but I could not find any plugin to do it nor any hint from themes that implemented something similar. Fortunately, the admin over at Back-on Online was kind enough to provide me with some code snippets when I contacted him. Unfortunately it wasn’t as simple as copying and pasting them into my style sheet and header files (Although I was secretly hoping for that) 🙂

After some unsuccesful tries over the course of an hour or so, I decided to google the name of the script which fortunately pointed me in the right direction.

Three hours later and my drop down menus are complete (in their first incarnation that is). Not only that but I’ve managed to add the categories as a drop down menu which should make navigation even easier.

My Relevant stylesheet part for the navigation drop-downs is this

/* Drop Down Menu */
#suckerfish, #suckerfish ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#suckerfish a {
display: block;
color: #fff;
}
#suckerfish li {
float: left;
position: relative;
}
#suckerfish li ul {
position: absolute;
left: -999em;
height: auto;
}
#suckerfish li ul li {
background: #009;
width: 20em;
}
#suckerfish li ul li a{
color: #AAA;
}
#suckerfish li ul ul {
margin: -3em 0 0 20em;
}
#suckerfish li ul li ul li{
width: auto;
}
#suckerfish li:hover ul ul, #suckerfish li:hover ul ul ul, #suckerfish li.sfhover ul ul, #suckerfish li.sfhover ul ul ul {
left: -999em;
}
#suckerfish li:hover ul, #suckerfish li li:hover ul, #suckerfish li li li:hover ul, #suckerfish li.sfhover ul, #suckerfish li li.sfhover ul, #suckerfish li li li.sfhover ul {
left: auto;
}
/* End Drop Down Menu */
It took me quite while to have the third level menu come out at the same level. The most important part to notice is that the width and the margin of it should be the same, otherwise you either get the manus overlapping or too far apart. In the third menu I fount it better to leave the width automatic so as not to extend the background color too much. However that created a problem with small links and as a result I had to reduce the parent <ul> width to something small to force the list items to fall under each other.

In the header, after adding the new class id in the <ul> parent of the navbar, I also included this


	
  • Categories
    •

    Which creates a drop down menu for the categories.

    All in all, I like this way of navigating through the pages much more. Unfortunately I only tested this in Firefox and Konqueror does not seem to handle everything as it should be so I just don’t even want to think what is happening in IE (even with the javascript hacks I had to put in). So if you’re using that and things look strange, do yourself a favor and get a standards compliant browser.

    I might go back to this once I get in the mood but for now I’m happy it’s at least working in firefox.

    PS: I just now discovered that the <code> function in worpress’ wusyiwyg editor pretty much suchs as it tends to be moved around every time I save.