Is this possible

@johndoe190Mar 28.2011

Hey, i installed a style on my wordpress blog and am wondering if this is possible, im not good with others code. At the top there is a black section that horizontally lists the categories what im looking to do is float a div to the right of that with an image link.

Is that possible in that area?

Here is the site – ~~[URL=”http://vegankingdom.co.uk/”]~~Vegan Blog[/URL]

Any help is appreciated as always

to post a comment

CSS

18 Comments(s) _↴

@DerokorianMar 28.2011 — #i think that would be as easy as:

<i>
 </i>[i]&lt;/ul&gt;[/i]
 [b]&lt;a href="target"&gt;&lt;img src="path/to/image.jpg" style="float:right"&gt;&lt;/a&gt;[/b]
 [i]&lt;/div&gt;[/i]

where the italic are the end of your ul and its containing div, and bold is the image link you want to insert

@Eye_for_VideoMar 29.2011 — #What Derokorian says is more or less right, but you need to find the .php file that is used to construct that portion of the page, commonly the header.php file.

You probably need a FTP program so that you can view all the files in the WP application so you can find the header.php file.

Typically it will be

[CODE]blog root folder
 wp-content
 themes
 name of your theme
 header.php[/CODE]

If you need a little help getting thru your first modifications:

http://jonathanwold.com/tutorials/wordpress_theme/

Create your own theme or modify another one.

Best of luck!

Eye for Video

www.cidigitalmedia.com

@johndoe190authorMar 29.2011 — #Cheers for the help guys, i will give it a shot?.

@DerokorianMar 29.2011 — #yeah sorry i coulnd't point you to the file to add that to, but I've never used wordpress, i just saw what to add based on the output it generates heh.

@johndoe190authorMar 30.2011 — #unfortunatly it doesnt work adding the code in, for some reason even with the correct image path the image doesnt show and it skews the layout, the logo goes higher.

cheers for trying though appreciate it.

@Eye_for_VideoMar 30.2011 — #Well you have to remember that WP is taking a bunch of php files and using them to build the page. So what might appear as the correct path to the image, most likely is not, since the theme is buried a number of folder layers deep but is displayed in the root level of the blog.

When adding in your own images or videos, you might want to create a special "images" folder in the root level and when accessing those images, use the absolute address to the folder/image. The image WILL show.

If the layout changes, it's because of the styling applied to that <div> or <div>s. A themes styles sheet is in the same folder as the header.php, usually named style.css.

Open that up and add, change the CSS styles as needed. You can get the logo to display just as you want it... it may take a little trial and error but it will work.

Best wishes,

Eye for Video

@DerokorianMar 30.2011 — #Also, as eye said you can make sure to use the abolute path

<i>
 </i>&lt;img src="&lt;?=$_SERVER['host']?&gt;/path/to/image.jpg"&gt;

@johndoe190authorMar 31.2011 — #all i added was <a href="target"><img src="path/to/image.jpg" style="float:right"></a>

But with the correct absolute path to the image, no image showed and the layout went skewed.

@Eye_for_VideoMar 31.2011 — #Well the absolute path would include http://www.yoursite.com/your_special_image_folder/image_name.jpg

The layout will need to be corrected in the style.css file for the class

class="catmenu"

Put the image and link back in the then comment it out
[CODE][/CODE]so we can actually see what the code looks like. If it's not there, it's pretty tough to figure out how to fix it.

Visit:

http://www.worldbarefootcenter.com/barefootblog/

view the source code, look for
[CODE]<div id="header" role="banner">[/CODE]
for an example of using an image as a link in a WP Blog.

Of course you still need to style it, but first get it to display.

Best wishes,

EfV

@NoasITMar 31.2011 — #using the http: path simply means that its not trying to find the image based on the file being viewed.

@DerokorianMar 31.2011 — #The reason absolute pass should start at http: for this is because starting with a folder name or backslash makes it relative to the parent calling script, which may or may not be the path you expect. If you can type in your browser window http://www.mydomain.com/path/to/image.jpg and see your picture that's the path you want to use (at least to get it working). Then you can try to figure out the path relative to the calling script if you like, personally I always use absolute paths for images and style sheets.

@Eye_for_VideoMar 31.2011 — #Typically for static sites a relative address works just fine, but if you are new to WP, trying to accurately path the dynamic address can be a little challenging... so the short-cut is to use absolute..
Well you have to remember that WP is taking a bunch of php files and using them to build the page. So what might appear as the correct path to the image, most likely is not, since the theme is buried a number of folder layers deep but is displayed in the root level of the blog.[/QUOTE]
Using the absolute address for a custom photo in WP WILL get that image to display.

Best wishes,

EfV

@johndoe190authorMar 31.2011 — #hey this time ive added the code in and it hasnt changed the layout but image still not showing.

Image - Image

Site - Vegan Health Blog

Appreciate the help everyone.

@DerokorianMar 31.2011 — #hmm well im stumped cause its right there in view source... sorry

@Eye_for_VideoMar 31.2011 — #Yes the image shows, but the style for catmenu is 45px high, to test, change that to 200px and you'll see it displayed below, on the next line.

The <ul> is a block element... so it takes up the entire width.

Even if the image is floated right, it's on the next line.

Change the style of the <ul> to inline or set a width that allows some room for the image.

EfV

@johndoe190authorApr 01.2011 — #Hey eye for video thanks for the help. Ok so i should set the style on the UL as display:inline; if i remember and that should sort it out?

Cheers again

@johndoe190authorApr 01.2011 — #Ok adding display:inline to the UL got the image to display, although the text link categories have moved up.

On IE it also doesnt work the image is very low and only shows half the size.

Any ideas? Cheers again

@Eye_for_VideoApr 01.2011 — #Dang... I'm having a few problems sorting this one out.... and running out of time. But here are a few things.

The image is 66 px high, catmenu is set to 45 px high so that will have to be changed.

IE is using a different style sheet than FF

Look for this in the source code:

[CODE]<link rel="stylesheet" href="http://vegankingdom.co.uk/wp-content/themes/tuaug4/style.css" type="text/css" media="screen" />
 <!--[if IE]>
 <link rel="stylesheet" href="http://vegankingdom.co.uk/wp-content/themes/tuaug4/style-ie.css" type="text/css" media="screen" /><![endif]-->[/CODE]

So making changes in one style sheet may not fix it in the other.

Do you have FireFox Firebug plugin? It allows you to test different styles setting in real time, without have to reload the page each time. By playing with the page and setting the height to 85 and removing the top margin, all the image showed in FF... not perfect alignment with the menu but it was a start.

So you may want to get Firebug and test with that.

http://getfirebug.com/

Also for IE there is the Internet Explorer Developers toolbar. It does the same thing in IE, allowing troubleshooting the realtime style changes:

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535

I'm just out of time for the project right now.

Best wishes,

EfV

Also in #CSS _↴

Browser inconsistencies CSS Tutorials?possible to float a input box using css?

Success!

Help @johndoe190 spread the word by sharing this article on Twitter...

Tweet This

Is this possible

18 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Is this possible

18 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #CSS _↴