ColinH
|
I have a 1000px sheet, but with a full width header and menu bar (actual content obviously still within sheet dimension). This is for Joomla.
I would like to add another full width row beneath the menu (it will basically have one background colour in this row, and then be able to insert an image or perhaps slideshow - which would be within the sheet boundary. Something like this site http://www.surface-mining-ukcoal.com which has a full width header logo area, menu, then dark band with images.
I can't see how to create the row under the menu so its full width, but also still allow content to be within the 1000px limits for the content.
Any help would be appreciated. Thanks.
|
| |
jrgweb
|
I have not tested this in joomla but this may get you started.
http://www.artisteer.com/Default.aspx?post_id=211360&p=forum_post
I can look at this later tonight if needed.
|
| |
ColinH
|
Many thanks. That allows content to appear full width within the sheet and will be very useful. I have copied the example and text appears fine in the new row.
I have just had a quick try but am unable to get a background to appear in this new section. I was hoping to check if the background would go full page width in this row. If you do have any time to check this, then it would be very much appreciated. Thanks again.
|
| |
jrgweb
|
@ColinH
I was able to get a background color.
I'll now test in joomla.
|
| |
ColinH
|
Great, if that was page wide rather than sheet wide and works in Joomla, perhaps you would be kind enough to indicate the code that worked.
Many thanks for all your help.
|
| |
jrgweb
|
@ColinH - Here is an example with joomla.
orange area is all hand coded
light-blue area is joomla module position
http://joomla.artisteertoday.com/
Now in my opinion the best way to achieve this is to:
step 1. Create an additional position
step 2. style that position
step 3. insert module in that position
So in the example above, (blue area) I created an additional position called colinh.
I then added this to the index.php
<div class="art-content-layout">
<div class="art-content-layout-row">
<?php echo $view->position('colinh'); ?>
</div>
</div>
The above is placed between the header/menu and the sheet. (right click to view source)
I then created a custom module in joomla.
In the template css I created a 2 custom classes. 1st is art-colinh which gives the light blue background.
The 2nd is p.row1 which formats the text
In the custom module advanced section under module class suffix I entered [space]art-colinh
Then when writing my text I included my class for formating.
<p class="row1"><span style="font-size: 18pt;"><strong>This is a custom html module. That means you can enter whatever content you want.</strong></span></p>
|
| |
ColinH
|
Great, i will give that a try tonight. Thank you.
|
| |
ColinH
|
Hi, sorry to be a pain. Tried using the extracts from your source code, amended index.php and template.css but i cannot get the background to spread (stays within sheet wheras yours spreads across page). Please have a look at test site www.shelby-limited.co.uk/smrctest/ so you can view the two files and code. I have commented IN where your code has been copied. Its obviously something very simple but i would appreciate the extra nudge so i can fix it.
Thank you again for taking time to help.
|
| |
jrgweb
|
My example is for the header and menu outside of the sheet.
I will look into your setup.
|
| |
jrgweb
|
@ColinH - Okay, since the header and menu are both within the sheet try this:
Insert this right under the <div id="art-header-bg" class="clearfix"> </div>
<div id="row1" class="clearfix">
</div>
Then insert this right before the </header>
<div class="art-content-layout">
<div class="art-content-layout-row">
<div id="row1" style="width: 100%" >
<br /><p class="row1">Enter Page content here...</p>
<p class="row1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id.</p>
<p class="row1"><a href="#">Read more</a></p><br />
</div>
</div>
</div>
Insert this into the css:
#row1 {
position: absolute;
overflow: hidden;
left: 0;
margin: 110px auto;
width: 100%;
height: 110px;
z-index: auto;
background-color: orange;
}
Now the adjustments.
You may have to add a top margin to the <div class="art-layout-wrapper clearfix">
The formatting for the <p> should now be automatic.
|
| |
ColinH
|
Many thanks again. I have tried adding the code as can be seen from the source on my test site, plus css (and margin - which just pushed content down) but this time the new header content has stayed at the top. Just can't seem to get it below the nav bar plus a page wide background.
Must be something i have done wrong. I think in the end this will be very useful to many people.
|
| |
jrgweb
|
Give me a few minutes and I'll have an example ready for download.
|
| |
jrgweb
|
@ColinH - download example
http://demo.artisteertoday.com/imagedemo/colin_row.zip
|
| |
ColinH
|
Absolutely perfect. A very big THANK YOU for taking the time to show me.
I have copied the relevant sections from the index and css files, and can now modify the original artisteer project files and reproduce your example.
This gives me a great starting point for the customisation i want to achieve.
I really appreciate you taking the time on this.
Colin
|
| |
BTD
|
@jrgweb
Thanks, this has worked for me as well. However, I have used CKSlideshow in full responsive mode.
Problem seems to be, that, CKSlideshow is scaling the width correctly, and possibly the height, but it seems to be setting the min height to just 60 pixels, where by my calculations, it should be set to 356. (Based on the original width and height scaled down to the new width etc)
Not sure what else to do, everything else seems fine.
|
| |
jrgweb
|
@BRD - Do you have link to website??
I added slideshowck here:
http://joomla.artisteertoday.com/
|
| |
tm
|
Worked for me here right above the footer:
http://www.nationwidemovemanagement.com/dev/index.php
|
| |