how to make it wider on SPECTRUM theme ?
-
hi all…i need your help.. ^__^
i choose to try use SPECTRUM theme for my wordpress… but i want to make the content area more bigger
i have upgrade my CSS and i try to change the css code#header,#main-wrap,#footer {
width:1000px;
margin:0 auto;
}#content {
float:left;
width:660px;
margin-left:-30px;
}#sidebar {
float:right;
width:300px;
margin-right:-30px;
}i change the content widht into 900 px to make it bigger…but the content move into center and the RIGHT SIDE BAR drop down to bottom TT_________TT
and do u know how to make a header in spectrum ???
and it is possible to move the PAGE ?? is really mess on the RIGHT TOP of my blog TT______TTThe blog I need help with is: (visible only to logged in users)
-
-
You’d need to either shrink the sidebar width by the same amount, increase the main-wrap width or a combination of the two.
-
ah, i’m so sorry..i forgot put the link of it..
http://www.starjunior.wordpress.com
i want to make the content more wider..but everytime i change the size..the right menu box always fall down to the bottom
-
You always have to look at the CSS and the markup together and you have to widen the most outer element/container first, then start working down through the children and grandchildren.
First thing you have to do is to widen
#header, #main-wrap, #footer {width:1000px; }Then you have to widen the content area by the same amount that you widened #header, #main-wrap and #footer
#content {width:660px; }If you want to widen the content by 200px (860px) then you have to widen the first set of selectors above by the same amount to 1200px.
-
-
-
Spectrum really isn’t designed for a header image, but you could put something into #site-description, which is the area right above the line above the post title.
#site-description { background:url("LINK_TO_HEADER_IMAGE") no-repeat scroll center top transparent; height:150px; padding:25px 35px; width:1000px}1000px should work well and you will have to play with the padding to get things looking the way you want. I also just included 150px as a height, but you can adjust that as needed.
-
ah thank you so mucch ~~~ it’s work !
btw, can this css input into zBench themecan i use this css
#site-description {
background:url(“LINK_TO_HEADER_IMAGE”) no-repeat scroll center top transparent;
height:150px;
padding:25px 35px;
width:1000px}for making header in zBench theme ??
sorry if so many question..but i want to learn about CSS ^__^
thank you so much !!! -
CSS is theme specific. Each theme author decides what they are going to name selectors and how they are going to organize elements in the pages.
If you switch themes you have to start over, but the zBench theme has a custom header feature, so you can add one without having to go the CSS route.
-
sometimes i really confuse with header feature…
can i change the size of header in Zbench ???? -
In the CSS, yes.
It’s under #header-background . Height can easily be changed. Width changes though would require changing other things as well to keep everything in alignment.
-
i have change the header
/* Header */
#header {
width: 100%;
height: 51px;
background: #454546;
font-family: sans-serif;
}from 51 px to 300 px…and it works…but do u know where i must link the image ??
because in zbench the header size is just 960 x 200 ^__^ -
The header image is defined under #header. You have to create the header at the size you want and then upload it to your media library and then put the URL of that image into the background declaration in #header-background. The custom header upload function won’t work once you modify the width and/or height of a header area as it always sizes to the original header image size.
This is from the original CSS. I have modified it with the 300px height. All you have to do is upload your image and then put the URL where it says URL_OF_HEADER_IMAGE .
#header { background:url("URL_OF_HEADER_IMAGE") no-repeat scroll 0 0 #454546; font-family:sans-serif; height:300px; width:100%; } -
Actually, forget the above. I got myself confused. The header URL has to go into this selector (I’ve included only the background declaration and the height change since that is all that is changing).
#header-background { background:url("http://flippintestblog.files.wordpress.com/2010/10/zbench-header.png") repeat scroll 50% 0 #454546; height:300px; }The “header” section is the one at the very top (the greyish stripped area). The actual custom header displays between the navigation and the content area.
-
i have use this
#header {
background:url(‘http://i53.tinypic.com/2yz08yq.jpg’) no-repeat scroll 0 0 #454546;
font-family:sans-serif;
height:300px;
width:100%;
}#header-background {
background:url(‘http://i53.tinypic.com/2yz08yq.jpg’) repeat scroll 50% 0 #454546;
height:300px;
}but it’s appear like this..
http://starjunior.wordpress.com/can i make the header on the center ???
-
You have to put set the horizontal position for the background image. Note that currently after “scroll” it says 0 0 ? Replace the first zero with “center” as shown below.
#header {
background:url(“http://i53.tinypic.com/2yz08yq.jpg”) no-repeat scroll center 0 #454546;
font-family:sans-serif;
height:300px;
width:100%;
} -
-
- The topic ‘how to make it wider on SPECTRUM theme ?’ is closed to new replies.
WordPress.com Forums 