This is for the 2.0.x default theme only. The same principles will probably apply to many custom themes, but you will need to adapt the details.
Apart from the full width banner itself, there are a few other things that need to be dealt with.
1/ The default header graphics will be unnecessary if you are wanting a very narrow frame, or no frame at all, around your banner.
2/ If you are wanting a wider frame around your banner, the default header graphics will look wrong. Specifically, you will only see the ends of the second, inner, gradient and that will look weird.
3/ Also, if you have too much height in the header content, the default image will run out of height and makes things looked borked.
4/ Upshrink icon and SMF logo will be pushed down beneath the banner, which isn't the best. A solution that lets them sit on top of the banner at upper right would be good.
5/ Depending on how much frame width you want around your banner, you may have to adjust side paddings on the user area, search form, and main menu (since they are all wrapped inside the header divs).
To start with, I'll give an example that has a 20px wide frame around the banner, which will work just fine with default paddings on the user area, search form, and main menu.
/* Styles for the general looks for the Curve theme.
------------------------------------------------------- *//* the framing graphics */
#header
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
padding-left: 20px;
}
#header div.frame
{
background: url(../images/theme/main_block.png) no-repeat 100% -480px;
display: block;
padding: 5px 20px 1em 0;
}
/* the content section */
#content_section
{
background: #FFFFFF url(../images/theme/frame_repeat.png) repeat-y top left;
padding-left: 20px;
}
#content_section div.frame
{
background: url(../images/theme/frame_repeat.png) repeat-y top right;
display: block;
padding: 0 20px 0 0;
}
#main_content_section
{
width: 100%;
min-height: 200px;
}
/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
}
h3, h4
{
padding-bottom: 3px;
}
/* the upshrink image needs some tweaking */
img#upshrink
{
float: right;
margin: 1em;
}
/* ..so does the SMF logo */
img#smflogo
{
margin-left: 1em;
}
/* Styles for the general looks for the Curve theme.
------------------------------------------------------- *//* the framing graphics */
#header
{
padding: 3px 3px 1em 3px;
background: #fff;
border: 1px solid #b7b7b7;
border-bottom: none;
border-radius: 9px 9px 0 0;
}
#header .frame
{
padding: 12px 12px 0 12px;
background-image: linear-gradient(to bottom, #c9d7e7 0%, #fff 200px);
border-radius: 5px 5px 0 0;
}
/* the content section */
#content_section
{
background: #FFFFFF url(../images/theme/frame_repeat.png) repeat-y top left;
padding-left: 20px;
}
#content_section div.frame
{
background: url(../images/theme/frame_repeat.png) repeat-y top right;
display: block;
padding: 0 20px 0 0;
}
#main_content_section
{
width: 100%;
min-height: 200px;
}
/* the main title, always stay at 45 pixels in height! */
.forumtitle
{
padding: 0 0 10px 0;
}
.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}
/* the upshrink image needs some tweaking */
#upshrink
{
position: absolute;
right: 12px;
top: 8px;
padding: 0 2px;
border-radius: 3px;
background: #4269af;
border: 1px solid #777;
}
/* ..so does the SMF logo */
#smflogo
{
position: absolute;
right: 40px;
top: 0;
}
#siteslogan
{
position: absolute;
right: 45px;
top: 0;
color: #fff;
font-weight: bold;
line-height: 3em;
}
And this:
/* clearing the floats */
#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
}/* clearing the floats */
#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
position: relative;
}That will take care of everything, but you may want to adjust the background around the upshrink icon, depending on the colours of your banner.
If you want a no frame at all around your banner, use this for the replace instead:
/* Styles for the general looks for the Curve theme.
------------------------------------------------------- *//* the framing graphics */
#header
{
padding: 0 0 1em 0;
background: #fff;
border: 1px solid #b7b7b7;
border-bottom: none;
border-radius: 9px 9px 0 0;
}
/* the content section */
#content_section
{
background: #FFFFFF url(../images/theme/frame_repeat.png) repeat-y top left;
padding-left: 20px;
}
#content_section div.frame
{
background: url(../images/theme/frame_repeat.png) repeat-y top right;
display: block;
padding: 0 20px 0 0;
}
#main_content_section
{
width: 100%;
min-height: 200px;
}
/* the main title, always stay at 45 pixels in height! */
.forumtitle
{
padding: 0 0 10px 0;
}
.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 8px 8px 0 0;
}
/* the upshrink image needs some tweaking */
#upshrink
{
position: absolute;
right: 12px;
top: 8px;
padding: 0 2px;
border-radius: 3px;
background: #4269af;
border: 1px solid #777;
}
/* ..so does the SMF logo */
#smflogo
{
position: absolute;
right: 40px;
top: 0;
}
#siteslogan
{
position: absolute;
right: 45px;
top: 0;
color: #fff;
font-weight: bold;
line-height: 3em;
}
And also adjust the paddings for #upper_section and #main_menu:
/* the upper_section, float the two each way */
#upper_section
{
padding: 5px;
margin-bottom: 1.5em;
}/* the upper_section, float the two each way */
#upper_section
{
padding: 5px 25px;
margin-bottom: 1.5em;
}And:
#main_menu
{
padding: 0 0.5em;
float: left;
margin: 0;
width: 98%;
}#main_menu
{
padding: 0 25px;
float: left;
margin: 0;
width: 98%;
}If you want an intermediate width frame, play with all of the above until you're happy.
0 commentaires:
Enregistrer un commentaire