Hi guys,

Getting to cleaning up a few things on my site - sweet-adversity.com - and hoping this problem will have an easy fix.

I'd like to make some adjustments to the content blocks on my homepage, the part in white. I'd like to adjust the transparency of the white background on the entire box as well as independently for the modules (Latest..., Links, etc.). I might also wish to change some of the other parameters for these areas.

What I'm wondering is whether there is a way I can make changes to these things without going into the guts of the template. If I have to make changes to the css I will, but I'm always a bit hesitant to do so and would like to avoid it if possible.

Thanks for your help,

Bob Camp

Hi Bob,

Not the guts as such - just need to add a couple of lines to the custom.css file

.mainwrap.zen-spotlight {background: rgba(246,246,246, 0.4);}

I'm translating the hex colour value to rgb using a site like

hex.colorrrs.com/

Then with the last value 0.4 added opacity - this value goes from zero to 1 so I'd suggest adjusting this as required

With the modules

as long as you have a module class as with myLatest this should also be really easy

.mainwrap .moduletable.myLatest { background:rgba(255,255,255, 0.8)}

I'm using the module class you added and following the same process

For how to add the css to the custom.css file check out

docs.joomlabamboo.com/zen-grid-framework-4/theme/customisation

Cheers
Paul

Many thanks, Paul.

I'll give all of this a go as soon as possible.

Bob

Hey Paul,

On the help page it says "The template comes with a file called custom_rename_to_custom.css file which after you rename to custom.css file it will be loaded by the template."

Is there a trick to renaming this file? I've tried it several times in different ways and it keeps giving me an error message. Do I maybe need to make a copy and rename that file?

Bob

Hi Bob,

You would either rename via ftp or via your cpanel

Cheers
Paul

Okay, I'll try the cpanel route. I thought since there was a "Rename File" button I could do it in the admin., but each time I tried it kept giving me this message:

Error: Invalid file name. Please choose a file name containing a-z, A-Z, 0-9, - and _.

Thanks

Should work fine in the cpanel

Cheers
Paul

It did, thanks.

Now, what I'd like to have control of is the size of the large white box (in case I want to just have it as a background for the feature text and not the modules), and, if possible, the font color of the text.

And now that I think about it, if I adjust those things I'll need to control the background and font for the Read More box.

Can I override those parameters the same way - by adding code to the custom.css file?

Yes you can

If you need help with the adjustments can you post a pic with some big arrows pointing to the areas you are referring to

Cheers
Paul

Hey Paul,

I was working with those changes we talked about and feeling confident about getting them done when I realized that the changes I was making to the homepage were also happening on the inside pages as well.

I had made a duplicate template for the homepage for the purpose of controlling it independently of the other pages, and I assumed that the changes I made to its custom.css would only affect the homepage. Obviously that isn't the case. It appears that any changes I make to either the main focus2 template or the copy affect both of them.

Unless you know of a way I can isolate the custom.css changes for the homepage template from the rest of the site, I'm going to have to think of another way of making the adjustments that we've been talking about.

Thanks for the help so far.

Bob

Hi Bob,

To target individual pages make use of the html classes and add those in front of the styles added to the custom.css file for example

.itemid-435 is the home page itemid class

Cheers
Paul

Brilliant. That worked.

Now I'll get together a pic of the homepage for you.

Thanks again.

No problem

Cheers
Paul

Hey Paul,

Finally got around to getting together a couple of screenshots and photoshops to show you what I'd like to do on my homepage (sweet-adversity.com).

First the current homepage:



Second is what I'd like the homepage to look like if I can't get it exactly the way I want (in other words what I think might be a fairly easy set of changes):



Basically this would involve just shrinking the background box to only behind the featured article (or two), and then controlling its parameters - transparency, font color, header size and color etc.

And the third one is how I think I'd really like the page to work. It would allow three or even four featured articles on the homepage with partially transparent backgrounds, and the modules ("Latest...," etc.) would move to the nav bar with dropdown menus upon mouseover.



Anyway, that's the direction I'd like to move in. Feel free to let me know if any of it's possible, and once again, thanks a bunch for all your help.

Bob Camp

Hi Bob,

CSS wise

.itemid-435 .mainwrap.zen-spotlight {background:transparent; box-shadow: 0 0 0;}

.itemid-435 .main-content-inner {background:rgba(255,255,255, 0.6); padding:1em 1em 0 1em}

would get you the home page I think

Thanks Paul, I'll give it a try.

You're welcome

Cheers
Paul

Just messed around a bit. It's a good start, but as you can see - sweet-adversity.com - this ends up leaving things a bit misaligned.

Can I move the three modules over to the left to line up with the nav bar (as the now-transparent background did before), then move the article box up and over too? If I could do that, then hopefully I could also widen the article box enough (lining up with the right end of the nav bar) to maybe accommodate 2 featured articles.

Bob