Amy
|
How can I create a solid colored sidebar that doesn't end when the widgets end? I want my left sidebar to be light grey and go from the header to the footer even if the widgets don't.
I added the background-color below, but that made the widget backgrounds grey...
Any ideas?
.contentLayout .sidebar1
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 316px;
background-color: #cccccc;
}
|
| |
Garry
|
I think you need to do it manually defining a new block in your style sheet, assign it background color and placing all your sidebar code generated by Artisteer in that block
|
| |
Daniel
|
I need exactly the same, but don't understand your explanation, Garry!
Can you elaborate your idea, please? 
I found this material on another site, but I have no clue how and where to do it!:
Stretch sidebar full height of the page
One of the first things I needed to figure out is how to have the sidebar colour or pattern stretch to line up with the length of the content. I’ve found the best way to do this is to initially create a background image showing a segment of the width of your site like this:
(This image would repeat vertically, with the white bit as my content area and the coloured bit on the right as my sidebar)
Then set up your sidebar and content area within the y-axis repeating background div. This way, the content will stretch down and cause the background to repeat, forcing the sidebar colour to also extend.
See below for a quick code example:
First, the CSS to show the bg image and the content areas:
#full_content {
background-image:url(../images/framework/page_bg_tile.jpg);
background-repeat:repeat-y;
margin: 0 auto;
width: 708px;
}
#side_bar {
float:right;
text-align:left;
width: 210px;
}
#main_area {
float:left;
margin: 10px auto;
text-align:left;
width: 670px;
}
Now the div’s to organise your content
<div class=”full_content”>
<div class=”side_bar”>
Sidebar content in here
</div>
<div class=”main_area”>
Main area text
</div>
</div>
Thank you
|
| |
DavidM
|
I have a tutorial at my own site which is actually replicated at artisteerhelp.com, a more robust support forum for Artisteer. My site's tutorial is at the following:
http://webstylee.com/forum/artisteer-1/background-image-on-sheet
If you have any further questions, you can easily post a response there. Registration is not required except for new forum threads. As for the sidebar spanning the header as well, one easy workaround is to make the header transparent in the area where the sidebar is.
Regards,
DavidM
|
| |
DavidM
|
I forgot to mention as an example, consider the following:
http://webstylee.com/church/?wptheme=BlessedStyleeWP
If you look at the stylesheet, using the Firebug plugin for Mozilla for instance, you'll see that the sheet-cc div contains an image link, something not integrated in Artisteer at the moment. It would be a mighty useful feature to have built into Artisteer.
Regards,
DavidM
|
| |
Daniel
|
Cool,DavidM
Another question: I need to add an image below the navbar and above first Post title to the template for Wordpress.
How can I do that?
Thank you
|
| |
|
|