Development Little problem with Wordpress

Hey modders

I hope you can find the little quirk I ran into, because I'm pretty much at
my css/xhtml limit here

This is the problem:
- I have a Wordpress site at www.motustudio.org
- It's an adjusted K2 theme, with widgets enabled.
- I installed a Flickr widget, but as you can see it doesn't appear to be quite right. The first image appears right next to the name "Flickr gallery".

Here's the CSS I used to alter the looks;

Code:

#flickr-javascript-widget img {
    border: 1px solid #aaa;
    padding: 0px;
    margin: 5px 8px 5px 0px !IMPORTANT;  /* for clever browsers */
    margin: 4px;                          /* for not so clever browsers */
    clear: right;
}

This Flickr-widget, along with the CSS, is used on a different theme I used as well. But the K2 theme is the first theme that doesn't render it right. I've tried to change the php/html in the Flickr-plugin, but that didn't work... mostly since i don't know much about PHP and Javascript.

Would any of you happen to know a (css?) workaround, or perhaps have an idea what went wrong here?

 

widgettitle

I think its just a case of styling that class. Its the h2 tag that the flickr gallery text is inside.

something like:

Code:

.widgettitle{
    display:block;
    }

should do nicely. And if you want to make those photos have a hover state and any other styling. make use of the <a> tag. I've put the css i use on my site below. (not the <h2> though, I don't use it)

Code:

div#flickr_photos a{
	display:block;
	float:left;
	width:72px;
	height:63px;
	margin:0 12px 10px 0;
	border:solid 3px #171717;
	}
div#flickr_photos a:hover{
	border:solid 3px #C52727;
	}
div#flickr_photos a img{
	width:70px;
	height:61px;
	border:solid 1px #000;
	}

That allows for a hover state. See my (soon to be public) site here

 

Thanks Will

I had a feeling it had something to do with the header-tag of the title.
The only problem is that the piece of xhtml which is the title in the webpage is generated through PHP. So I'm not really sure where to find that header. If I found that one, I could even do it with something as simple as a line-break, hehe.

Styling the images, and giving them additional things like a hover isn't a problem for me... I feel pretty at home with css, My main "problem" is the fact that some pieces of xhtml code are generated through php, making it hard for me to find it in the files

Could you, if possible, tell me where to find that piece of code by any chance?

 

The theme files are usually stored in http://yourblog.com/wp-content/themes/nameoftheme
sidebar.php or styles.css should contain the code you're wanting. You can edit them both either using the Admin section of Wordpress (under Presentation>Theme Editor) or using a text editor and ftp it up/down from the site.

 

Thank you for your reply Lazlow, but unfortunately it doesn't work that way

The CSS is implemented by hand, but Wordpress + K2 uses a widget-system.
It means that if I activate a widget in the preferences (i.e.: the CMS), it will
generate a code that is only noticable when viewing the website. The widget
doesn't actually "put" code into the sidebar itself... at least not untill I view
the website. But when that happens it's not changeable, hehe.

At least, that's what I can see in the sidebar under Presentation->Theme Editor.

I did find a piece of Flickr-code in the K2-theme, but putting a linebreak after
the H-tag didn't do anything. It was almost as the developer of K2 forgot to remove
that code when releasing it

 

didn't you put the h2 to display:block ? I would have thought that would fix it..

 

I tried, but the only h2 regarding the Flickr plugin i could find was that part
which was in the sidebar already. For some reason neither "block" or a "linebreak"
work... pretty strange eh?

 

found it.

change:

Code:

.secondary h2 { /* Secondary H2 is sidebar headlines */
	font-size: 1.5em !important;
	font-weight: normal !important;
	padding: 0 !important;
	display: [b]inline;[/b]
	}

to:

Code:

.secondary h2 { /* Secondary H2 is sidebar headlines */
	font-size: 1.5em !important;
	font-weight: normal !important;
	padding: 0 !important;
	display: [b]block[/b];
	}

 

Oh wow, thanks a lot!!

I'll look into that one
Jus one little question in advance; wont that chance áll the h2-tags with that
class-name?

But again, thanks a million for searching through that pile

 

wont make a difference, doesn't matter though, just put this:

Code:

.widgettitle{
    display:block;
    }

in a stylesheet that loads after the default one. Or just after that h2 tag in the same stylesheet.

 

I'll try the first one first

But in essence both your solutions would clear all space on the right side of the
headers in the sidebar right? Would that be the same as putting a "clear:right" tag
into those css-tags?

I'm gonna see what these solutions do to my layout in Firefox and IE6
Would be great if that little tag solves my problem, hehe.

Thanks again!

 

The change in the secondary h2 tag worked like a charm
All I had to add as an extra tag was text-align:left, in order
to get those headers to the left side again.

But it did solve my quirck

Mucho gracias senior!

 

My pleasure