General Design layout question

Worker Joined: Dec 01, 2008 Posts: 180

Firstly, i am using the Anagram theme, but was wanting to change the layout of the header, in the sense i was wanting to add a graphic behind what is presently there.

For instance, if my header is width="920", and i had an image with like a border style, but the image was a rectagular whole block type; but i wanted to make the image so it surround the headers border, or should i say to get it behind the header, so it looks like it surrounds the border, how would i accomplish this in the theme.php or style.css file?

It would really be appreciated if someone could advise me of how i could do this.

Thanks in advance.

xx Bless xx

registered · Posted: Fri Apr 03, 2009 5:22 pm

You could try with function themeheader() in theme.php to put a DIV tag around the header code with an id="somename" on it. Then, within style.css, give that id name a background-image attribute.

Posted: Sun Apr 05, 2009 5:54 am

I know this seems lame to ask, although i do not claim to actually be that smart at this, but i can't exactly figure out the correct way to do this.

I know for instance that in html for the theme header function, it maybe something along the line of:

Quote:

But i know were working with php and this just don't work, or maybe i am wrong anyway. Embarassed

I'm clueless honestly to being able to do this in both the theme header function, and the style.css.

I don't suppose you could advise me further please?

xx Bless xx

Posted: Tue Apr 07, 2009 7:03 am

pureliving, don't take this the wrong way please, but if you are going to be on the internet, I would highly recommend building up your reading repertoire. There are so many good books on HTML, CSS and PHP/MySQL out there to learn from. A webmaster needs to have these skills to truly be successful.

I don't have time to code this for you and this really isn't a difficult task, but it will take some trial and error on your part. There is code already in that function to echo out HTML tags, so you have good examples to work from.

One comment on the code you posted: I would remove the align="center" as you should just add to your CSS style definition what you need there.

Find the start of the HTML that you want to be subservient to this new <div> tag and echo out the initial opening <div...> tag. Then find the last bit of code that should be folded in under this div and echo out the final closing </div> tag.

Within your theme's style/style.css file you would add the necessary statements to a new #header01 definition. It might look something like this:

Code:




#header01 {


   background-image: url(../images/someimage.jpg);


   text-align: center;


}

This should be enough to get you started...

Posted: Tue Apr 07, 2009 9:51 am

Montego, i think you underestimate me, or rather i underestimated myself this time.

Think not that i'm not aware of research, as i am.

I had tried several ways prior to my coming on this forum; i come here as throughout my research this is the best place for solutions, and the only place i seem to keep finding what i require. Simple, RavenNuke's the best!

Ok, back to the topic, i seem now to have solved what i wanted. It wasn't a problem of not knowing what to put, rather it was an issue of my lack of correct typo's, for instance, the opening div in theme header:

Quote:

.'<div id="header01" width="970" border="3" align="center">'
.'<table cellpadding="0" cellspacing="10" width="920" border="3" align="center" bgcolor="#FF0000">'

style.css :

Quote:

#header01 {text-align: center; width: 990px; height: 200px; background-image:url("/themes/Anagram/images/banner-angel.gif")}

The above is correct now and works, but why it wasn't was because i had accidently typed " before the id= , rather than before header01.

My mistake sorry. Embarassed

Posted: Tue Apr 07, 2009 3:31 pm

trials and errors suggested by montego is paying...i think you're on the good way Very Happy

.
I suggest you look at http://www.csszengarden.com for examples and the other themes in the RN package.

Posted: Tue Apr 07, 2009 6:18 pm

eldorado, I love that web site as well. Excellent ideas.

pureliving, way to go! You should not need any of the attributes that you listed in your DIV tag though. Those are all presentational and should be controllable via CSS?

Posted: Wed Apr 08, 2009 3:11 pm

pureliving Try this in your css instead.

Code:




div {


   text-align: center;


        width: 990px;


        height: 200px;


        background-image:url("/themes/Anagram/images/banner-angel.gif");


   }

montego is right too. Everything should be controllable from within the css.

btw ...me think we should get rid of <tables>

Posted: Fri Apr 10, 2009 6:46 am

eldorado wrote:

btw ...me think we should get rid of <tables>

It was done with RavenIce. The trickier part is in the core modules and just plain core of *nuke because once we "break it" we run the risk of breaking people's sites. However, it hasn't been looked at in any detail as of yet, so it might be easier than it looks. We added a base ravennuke.css under themes just for this type of purpose.

Posted: Fri Apr 10, 2009 3:31 pm

I didn't know. Sad

That's really nice..Really opens up the easy theme development process .

I'm looking again at zengardencss and it really amazes me each time I go on this site.

Btw I may be stepping on some foot here , but is it possible to include variables in ravenice's css?

Posted: Sat Apr 11, 2009 8:29 am

eldorado wrote:

is it possible to include variables in ravenice's css?

We could easily convert it to a PHP script, but would like to understand more of why you are asking for this.

Posted: Sat Apr 11, 2009 1:21 pm

Thank you both for your advice.

Montego, i did what you stated and took out the attributes, simplifying the css.

Although eldorado, i prefer the div to stand out separate id's, as done above, e.g:

.'<div id="header01">'

so i have it starting #header01 {

Seems to work perfect for me, and with Montego's advice, works the same, but quicker css functioning instead of in themes.php div attributes.

If i were to write in more divs into my theme file, within css it would revert all div to push those attributes onto it, unless others all had separate id's as i have done.

--------

Although i will say from my perspective a mix of tables and css seems to be better in the sense of design and outlay, which is vital to user perception; the tables create outstanding attention, whilst css better for loading, but doesn't seem that good relying on it's own.

I really don't know that much of it all, but i'm willing and learning, and from what i notice so far, i would have to say tables and css.

Posted: Sat Apr 11, 2009 4:47 pm

pureliving.Yes css is quicker, as it it now cached in browsers and with some good plugins , you can even change the css in your browser making theming much more funnier.
Montego.Some sort of universal css generated on the fly. I'm thinking of a theme pannel changing the values and attributes. But isn't that already done in auto-theme?