I deleted the lines that were displaying then realized that they may have been responsible for the selection bar - which is missing.
Right now the bottom of the rotating picture frame slightly overlaps the top of the centered search window and "GO" button ... but no selection bar (Privacy, Discussions, etc.)
I put the lines back in ... now have to figure out why they aren't working ... then the image box overlap problem ...
you will have to find the name of the selectors using a web inspector and write css rules for these things if you don't have a specific style sheet for this.
I copied the custom.css from annotated_css and added your
.slideshow{
width:500px;
height:200px;
position:relative;
top:10px;
left:10px;
padding:10px;
}
I don't see a difference in the slideshow but I did get the taskbar back ... and his really garish colors! ;-)
I do still have the alignment problem (slideshow box bottom overlap) plus a new bit of html/php displaying - this time it's underneath the slideshow box (Isn't that what we just deleted?):
< div id="Head" > < h1 >< a class="Title" href="/">< span >< ?php echo Gdn_Theme::Logo(); ? >< /span >< /a >< /h1 > < div class="Menu" >
Another Question, please?
If the custom.css is supposed to control the display parameters should I still have the width and height in the html in default.master.php?
Doing that moved the images to the upper left corner - leaving a long white area across the top of the page.
Is it non-trivial to use that space for a banner - probably the initials OACHE and the full group name and the state?
well you need to adjust the sizes with the css, I gave you some values but you need to make them the size you need and play with the alignment . How about you link me so I can see ?
oachegroup.org/
I'll toggle the custom theme and leave it on for a little while - may freak out the members - but they expect that from me ... and I'm the president of the group. :-) I am presuming that if I click Preview you will see it - or do I need to choose Apply?
this is what that section looks like in my theme master, notice I kept the Head also the logo div since that is where we want the images . Right in the logo div is where you put the stuff.
< div id="Frame" >
< div id="Head" >
< div class="Logo" >< div class="slideshow">< /div >
(This is the part we remove)< h1 >< span >< ?php echo Gdn_Theme::Logo(); ? >< /span >< /a >< /h1 >(end remove part)
< /div >
< div class="Menu" >
In any case you need to make the slideshow height about 150 px so it appears at the top of the page. And use margin:0 auto and text-align:center to get to go in the center.
Everything is centered and looks better now ... thanks ... OK, well, better - other than the garish colors and the unused space to the right of the slideshow! :-)
well you can add two more or however many to take up the room next to each other,
< div class="slideshow">< /div >< div class="slideshow">< /div >< div class="slideshow">< /div >
then you would add css
div.Logo{
display:inline;
width:100%; (or the best size you choose can be in pixels)
height:150px; (or the height of the slideshow you used)
white-space:no-wrap; (this in case they break when you make the page smaller)
margin:0 auto; (or whatever works for you)
}
or
.Logo{
display:inline-block;
width:100%; (or the best size you choose can be in pixels)
height:150px; (or the height of the slideshow you used)
white-space:no-wrap; (this in case they break when you make the page smaller)
}
The point is that you can do a bunch of things using css to change the way they look.
Can I put something like < div class="oachelogo"> next to to < div class="slideshow"> then populate that with an wide and shallow image we create to fill the rest of the banner space to the right of the slideshow?
Comments
It's working! But ... that line still pops up ... guess I can just hunt it down and remove it ... or comment it out.
This is where the displayed line of code comes from:
</head> <body id="<?php echo $BodyIdentifier; ?>" class="<?php echo $this->CssClass; ?>"> <div id="Frame"> < div id="Head" > < h1 >< a class="Title" href="<?php echo Url('/'); ?>">< span >< ?php echo Gdn_Theme::Logo(); ? >< /span >< /a >< /h1 > < div class="Menu" > <?php $Session = Gdn::Session();I deleted the lines that were displaying then realized that they may have been responsible for the selection bar - which is missing.
Right now the bottom of the rotating picture frame slightly overlaps the top of the centered search window and "GO" button ... but no selection bar (Privacy, Discussions, etc.)
I put the lines back in ... now have to figure out why they aren't working ... then the image box overlap problem ...
you can remove the whole line
< h1 >< a class="Title" href="<?php echo Url('/'); ?>">< span >< ?php echo Gdn_Theme::Logo(); ? >< /span >< /a >< /h1 >< div class="slideshow" > is the class for that div so now you need to write a css rule for it
put it in the custom.css
.slideshow{ width:500px; height:200px; position:relative; top:10px; left:10px; padding:10px; }you will have to find the name of the selectors using a web inspector and write css rules for these things if you don't have a specific style sheet for this.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
I copied the custom.css from annotated_css and added your
.slideshow{
width:500px;
height:200px;
position:relative;
top:10px;
left:10px;
padding:10px;
}
I don't see a difference in the slideshow but I did get the taskbar back ... and his really garish colors! ;-)
I do still have the alignment problem (slideshow box bottom overlap) plus a new bit of html/php displaying - this time it's underneath the slideshow box (Isn't that what we just deleted?):
< div id="Head" > < h1 >< a class="Title" href="/">< span >< ?php echo Gdn_Theme::Logo(); ? >< /span >< /a >< /h1 > < div class="Menu" >Another Question, please?
If the custom.css is supposed to control the display parameters should I still have the width and height in the html in default.master.php?
<div class="slideshow"> <img src="http://oachegroup.org/themes/oache/bannerimages/aidenpropps1-bi1.jpg" width="320" height="240"/>And more, of course ...
Is this (following "head") necessary in default.master.php
<?php $this->RenderAsset('Head'); ?> <title>JQuery Cycle Plugin</title> <style type="text/css">.slideshow{height:232px;width:232px;margin:auto}.slideshow img{padding:15px;border:1px solid #ccc;background-color:#eee}</style>or does it compete with what's in custom.css
well that is the style and is not a good practice to add it there , that is why you add it to the custom.css
you can remove
title and the style . That might also fix your problem.
don't delete this part < div id="Head" >
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
True which is why you would or could add also that rule to the custom css and remove the sizes from the images in the master
.slideshow img{ padding:15px; border:1px solid #ccc; background:#eee; width:400px; height:auto; }❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Doing that moved the images to the upper left corner - leaving a long white area across the top of the page.
Is it non-trivial to use that space for a banner - probably the initials OACHE and the full group name and the state?
well you need to adjust the sizes with the css, I gave you some values but you need to make them the size you need and play with the alignment . How about you link me so I can see ?
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
I like it, I like it, I like it! The code keeps getting cleaner and if I stay at this for a while I might even come to understand it ;-)
Yes it's pretty much trial and error and then after a few times it becomes second nature
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
oachegroup.org/
I'll toggle the custom theme and leave it on for a little while - may freak out the members - but they expect that from me ... and I'm the president of the group. :-) I am presuming that if I click Preview you will see it - or do I need to choose Apply?
We you able to see it?
it looks like you erase some parts from the head
this is what that section looks like in my theme master, notice I kept the Head also the logo div since that is where we want the images . Right in the logo div is where you put the stuff.
< div id="Frame" > < div id="Head" > < div class="Logo" >< div class="slideshow">< /div > (This is the part we remove)< h1 >< span >< ?php echo Gdn_Theme::Logo(); ? >< /span >< /a >< /h1 >(end remove part) < /div > < div class="Menu" >❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
In any case you need to make the slideshow height about 150 px so it appears at the top of the page. And use margin:0 auto and text-align:center to get to go in the center.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Everything is centered and looks better now ... thanks ... OK, well, better - other than the garish colors and the unused space to the right of the slideshow! :-)
well you can add two more or however many to take up the room next to each other,
then you would add css
div.Logo{ display:inline; width:100%; (or the best size you choose can be in pixels) height:150px; (or the height of the slideshow you used) white-space:no-wrap; (this in case they break when you make the page smaller) margin:0 auto; (or whatever works for you) } or .Logo{ display:inline-block; width:100%; (or the best size you choose can be in pixels) height:150px; (or the height of the slideshow you used) white-space:no-wrap; (this in case they break when you make the page smaller) }The point is that you can do a bunch of things using css to change the way they look.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
you forgot one < /div > after the slideshow to close the Logo div. You only closed the slideshow div.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Can I put something like < div class="oachelogo"> next to to < div class="slideshow"> then populate that with an wide and shallow image we create to fill the rest of the banner space to the right of the slideshow?