Banner - rotating pictures?

vrijvlinder

I have a better one why not use an image that wide as a background , you can achieve this by adding a background image to the Head

in the custom css

#Head{
background:url(image address);
}

or you can also just add the images next to the slideshow

< div class="Logo" > < img src="image address"/> < div class="slideshow" > < img src="image address"/>

if you give the images a class then you can simply control the size with css

img class="oachelogo" src="image address"/

img.oachelogo{
width:200px;
height:auto;
}

DavidColburn

@vrijvlinder said:
you forgot one < /div > after the slideshow to close the Logo div. You only closed the slideshow div.

Did I actually need to add two < /div > because I needed one for

<

div class="Menu"> and

<

div class="Logo"> as well as

<

div class="slideshow">?

Do I understand correctly that

<

div id="Frame"> and

<

div id="Head"> do not require a < /div >?

DavidColburn

I will try the div class logo method tomorrow ... past my beauty-rest time here ... again. ;-)
Thank you again for the assist!

vrijvlinder

that is correct the Head div closes after the menu.

DavidColburn

OK, went to do this, after creating an image, and the code confuses me ... I know that surprises you! ;-)
< div class="Logo" > < img src="http://oachegroup.org/themes/oache/bannerimage/oachebanner1-bi1.jpg"/> < div class="slideshow" > < img src="image address"/>
1. Does having Logo and slideshow on the same line in the code cause them to be displayed on the same line on the screen?
2. Does this line replace the existing Logo and slideshow lines just prior to the list of images for the slideshow?
3. Do the spaces in the code above need to be removed (e.g. between < and div)?

vrijvlinder

1. Does having Logo and slideshow on the same line in the code cause them to be displayed on the same line on the screen?

Not just on the same line , sometimes on top of each other, so you must put a margin-left:width of the first image and so on to space them out.

2. Does this line replace the existing Logo and slideshow lines just prior to the list of images for the slidesshow

Not sure I understand the question, the logo div makes the space where the logo would go.

In the master it does not matter in some cases if you put the stuff next to each other or on different lines, however for putting multiple things in one line without creating columns will require you try to place them as close to what you want them to look like

for example on the line for the images and slideshow, only close the last div and the logo div

If you close all the divs of the slideshow or put < br > or < p > or even on a line below it will display them above each other in a vertical column, we want horizontal so must keep them together as one single line.

This will still require css to adjust them.

3. Do the spaces in the code above need to be removed (e.g. between < and div)?

Yes I put them in so they show here ....

DavidColburn

I tried adding this after the similar slideshow code in custom.css but I am not understanding something as it changed the slideshow dimensions but didn't display the Logo image ...
.Logo img{
padding:15px;
border:1px solid #ccc;
background:#eee;
width:600px;
height:auto;
}

DavidColburn

Never mind the last - I had an error in the Logo image name.
OK, so right now the images are stacked - Logo above slideshow.
I'm not sure how to put them side-by-each ...

vrijvlinder

give class to your image so you can manipulate it with css

img class="logoimage1"
img class="logoimage2" etc

then add the css to move it where you need to. Don't deal with dimensions yet first get it aligned right.

img.logoimg1{
position:relative;
left:250px;
}

I will be gone for a few hours ..

DavidColburn

OK, I put the after the list of slideshow images then the Logo line and that restored the right sizes and put the slideshow on top and the Logo below ... but still not side-by-each ...

DavidColburn

OK, I visited your web site so I get that you are a busy person!
You are as diverse in interests as am I - though more accomplished and artistic - more like our daughter.
Have a good and productive time ... I'll try not to break things too badly in your absence!

vrijvlinder

Thanks

ok so now you need to add the css for that image

.logoimg1{position:relative;margin-top:-30px;margin-left:250px;}

You can play around with the sizes and the positioning to line it up as you need.

You can use firebug or another web inspector to edit live on the code and see your changes before you actually edit something. That is what I use to get or create these lines of css.

If they don't have a css rule you can add the style inline in the html part , just right click on the part you want to edit as html and then you can write in there the inline style to be able to see what it would look like. Then just transpose that into a css rule like I did above.

example of inline style:

< div class="logoimg1" style="position:relative;margin-top:-30px;margin-left:250px;" >

If you decide to try out other themes just copy the contents you added in the default.master.php into the other theme default.master.php

This is the reason why using plugins to insert that kind of content is useful. Because you don't have to put the stuff in there every time you change themes.

DavidColburn

I missed you! I feel as if I am in code-danger without you ... :-)

While you were away I toyed with a variety of settings, referencing a css tutoring site peregrine linked elsewhere.

Here is what is now in default.master.php

<body>
    <div class="Menu">
    <div id="Frame">
    <div id="Head">
    </div>
    <div class="slideshow">
        <img src=" -- the series of images for the slideshow here as before --

... then

    </div>
    <div class="logoimg1">
    <img src="http://oachegroup.org/themes/oache/bannerimage/oachebanner2-bi1.jpg"/> 
    </div>
</head>

And in custom.css

    .slideshow img{
    padding:15px;
    border:1px solid #ccc;
    background:#eee;
    width:200px;
    height:auto;
    }

    img.slideshow{ position:relative; float:left; 
    }

    .logoimg1 img{
    padding:15px;
    border:1px solid #ccc;
    background:#eee;
    width:600px;
    height:auto;
    }

    img.logoimg1{ position:relative; float:left; 
    }

But still - I cannot get the logoimg1 to float up next to the slideshow.

What am I missing, please?

DavidColburn

I noticed that I had edited the image used for logiimg1 and it was larger than the original so I reduced it to 600x172 and replaced and reloaded the Forum but observed no change.
My son's friend says he sees the images overlapping while Ben & I see them on separate lines.

vrijvlinder

I think you need to look at other themes so you can compare better and get it right. Please go back and read some stuff here in this thread I covered it all already, I remember lol

Please download my theme GreenGlass and look at the master and compare what I have there.
It is faster than trying to explain here .

Just copy the order of things , who knows you might even like the theme or another of mine or just another. But you need to look at mine specifically because what you are asking here, is in the master of my themes and I know how I put things as opposed someone else's theme

So instead of me reproducing my master here just download , look at it, study it, take what you need from it. It has some good stuff.

http://vanillaforums.org/addon/greenglass-theme

http://vanillaforums.org/addon/redwood-theme

DavidColburn

Thank you - they are both beautiful! Electronic-forum hugs ... if that is permitted. I will get about educating myself a bit more rather than thrashing-about blindly. Thanks!

vrijvlinder

@DavidColburn
I saw you chose the redwood theme, looks nice it is one of my best and favorite. I wanted to give you a tip for making the visitor content area the width of the page which looks better. ExtraPage does not have extensive css,

I recommend you put this code in the custom.css of the redwood theme to make the visitor page wider

    body.Dashboard.Plugin #Content {
    width: 97%!important;
    text-align: justify;
    text-indent: 40px;
    }

and for the links you placed, you need to put them in a ul , like ul class="links" so you can apply css and be able to organize them better in the space. And each link should be in a list , li

You can also give the links the class Button

< li class="thelinks" > < a class="Button" href=" link" etc. > < /a > < /li > by giving the links the "Button" class it makes them come out like the rest of the buttons .
at the end of the list you close the < /ul > unordered list.

Then you can use those classes to further change the looks as you want.

DavidColburn

OK on modding the css for the visitor page, done & thanks!
Your other suggestion will require me to finish this cup of coffee.
You are giving me a crash-course in css and while I enjoy the challenge and appreciate your patient-sharing the coding area of my biomechanical computer (brain) is reengaging reluctantly ... lots of grinding gears and screeching drive belts ;-)

DavidColburn

OK, took me a few minutes with distractions and goofy errors ... looks nice ... thanks!

vrijvlinder

Ok good yea it is better here is another tip , if you add the id Menu to the ul for the links, it will appear in line and centered like the menu.

so you give the id=menu to the ul of the links in the extra page like this

< ul id="Menu" >

then a little css to make it tight

#Menu a {
text-indent: 0px;
line-height: 1.7;
}

this will make it perfect you can add this css to the extra page css file.

You can apply the same stuff in other pages you mage to match the looks of the links and buttons or how it appears. I call it hooking into the class or id of an existing selector which already has css rules I like and want to use.