Hi. Can you give me some basic tips for CSS styling?

I found this: docs.joomlabamboo.com/getting-started/how-to-add-custom-css-to-joomlabamboo-templates

But what is the Module Class Suffix for? Do I use that sometimes/with/instead of the Custom CSS file?

I am just starting out with CSS and am a bit lost.

Thanks for any help you might provide.

One example that I trying to figure out, is to change the size and styling of the pop up search box on my site. 37.60.251.254/~jeffmill/ accessible by clicking "search" under the menu bar.

I used Firefox "Inspect Element" and found the following, but I am not sure if this is correct, and what I should do with it. . . .

.zen-panel {
padding-top: 40px;
float: left;
width: 100%;
-webkit-transition: all 250ms;
transition: all 250ms;
opacity: 1;
}
.zen-panel {
display: none;
padding: 20px;
background: #fff;
color: #333;
position: absolute;
top: 100px;
z-index: 100;
max-width: 50%;
min-width: 50%;
left: 50%;
margin-left: -25%;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}

Hi Jeff,

With templates they normally come with several inbuilt class suffix

When these classes are used it triggers css styling and sometimes certain programmed behaviour that is coded in the template

For example

bambootheme.com/showcase/nov14/template-features/module-overview/module-classes

bambootheme.com/showcase/nov14/template-features/module-overview/using-module-classes

It is however quite simple to create your own class if needed

You would add a class name that is unique of your own choosing

e.g largeText for example to a custom module

then in the custom css file you would add

.largeText {font-size:2em;}

so the module has the class suffix largeText and then has the style
font-size: 2em applied to the modules content

If you need any more explanation on above please ask

Returning to your site - can you explain what you want to change on the search module?

"is to change the size and styling of the pop up search box on my site."

With custom.css it is used also to override the template styling if needed - to quote another doc

"Custom css is new css code you add to your site
its either - new css code or css code to override an existing template styling

The file it needs to be added to is called custom_rename_to_custom.css or if renamed custom.css (for the file to work it needs to be called custom.css) - this file is protected from being overwritten by template updates"

The path to the file is
\templates\template name\css\custom_rename_to_custom.css"

via the joomla backend the path is

extensions tab > template manager > Templates (top left in Joomla 3) > "template name" details and files > Edit css/custom_rename_to_custom.css"