I have watched all the videos and maybe I am missing something. I would like to put a background in the part that is white behind my content on the home page. I have an idea (which might not work) of something like a bluish marble look. Can I do this? Take a look at my site and you will notice there is a lot of white space. I am OK with the school colors used in the other spaces, but the white just sticks out. Do you have any advice?

Denise

Yup, for larger screens too much white Don't know why there is no way to modify since it's very simple, IMO an oversight.

Here's how you do it. Put this in Preferences - Google Analytics box to change ALL pages. Look up html colors to vary using #rrggbb color coding. Named 'lightblue' should work on your site color mix. This is just easier to show here.

You can also add a nice graphic 'texture' using background-image instead. It's what I did on our site (not responsive but same sort of change - replaced 'white').
<style> #wrapper{ background-color:lightblue; } </style>

FYI you can "proof" on any page by just adding that to the page in source mode, click Preview and you'll see instantly what it looks like without affecting anything.

(edit removed a ; accidentally put 2 ;; there)

Might consider making the white font a bit darker. Ask your classmates, but my eyes have trouble focusing. Top Horizontal Hover is not the same as Left Vertical side hover colors. That is another thing that should be modified to make matching simpler between the two menu orientations.

I agree. The one enhancement I would like to see is the ability to provide a background color - in my case, probably the dominant school color (Hunter Green) at ~25% saturation.

Unfortunately, I don't feel comfortable hacking the code, whether via the Google Analytics box or otherwise.

The goal is to solve and extend the basic style outline CC has provided - in this case via CSS. IOW, this is really not hacking, just like using the tools available for changing a page's looks using html is also not hacking.

Using CSS like this is a DOCUMENTED property. You can find how to do this and more at w3schools.com

"Hacking" implies something that is not supported and CSS is actually the whole idea to allow this sort of stuff. Before CC adopted more or less full CSS styling things were much harder to change.

For that matter, Google Analytics code is actually a "hacking" oriented solution to getting site visitor data. Or adding scripts to get things like snow or count-down clocks. All these make a site extensible by providing these sort of solutions that are part and parcel of designing a website.

Like I said, you can 'preview' at what happens just by putting in source mode and clicking 'preview'. You don't have to use Google Analytics at all, just put on any page(s) desired. Each page can actually be different.

There are lots and lots of things that you can do that are NOT available using just the CC editor. That editor is a pretty simplified version of a full-blown editor.

There are lots and lots of HTML/CSS standard options beyond what the editor provides that you can do. Sort of like going from Notepad and then discovering Word

Jack
I just copied your code and it looks much better now. Not that I won't continue to "fiddle," but I promised my classmates that I wouldn't do too much all at once. Later this month I will be setting up registration for this summer's reunion. I know the viewership will be up, and I don't want confusion.

You have done much work on your site and I don't have the time, but it looks nice and one can see that you have the attention to detail.

Dana, I don't feel like it's hacking as I used google analytics when I first started this whole thing, plus I have "borrowed" code for our music and have allowed CERTAIN people to do that with my work.

Perhaps one of the admins will look at this Monday morning and contribute. Originally I had chosen the "newspaper" design because I tend to think like a journalist (oh, well!) and I know it's not going to look like that, but this helps. At least for now!

Denise

Great - IMO looks better. That color was just a starting point to get a quick idea.

Maybe you do this already - the safest/easiest way to experiment is to build a 'new' page, do not activate and try out different ideas. Then when you are done, copy and paste that back into the desired page.

Sometimes I wonder what my other admins think when they find all these odd inactive experimental pages all over the place

Jack -

Thank you. I have what, to you, probably are simple questions.

Using Chrome Developer Tools while at the Home Page, scrolling through the template class_index.cfm I see the following:

/* content */
#wrapper {   
   
   background-color:#ffffff;
   
   background-repeat:repeat;
   background-position:left top;
   background-size:auto;

}

Is that background-color the unalterable setting about which we are complaining?

If so, how can I edit it directly?

Dana

Dana, CC does not allow you to edit the CSS directly. However, CSS works on a 'last-in' basis for most CSS. IOW, the last style encountered overrides any prior style settings.

So the way to edit/change things is the method given. Add some 'later' CSS style and it will change the prior style setting. Even CC has some conflicting style data where the last one overrides.

That is an excellent idea and I just imagine I am going to be snowed in one of these days and I can experiment. I've changed lots of things, as you can imagine, but I have never deliberately experimented. I worked at two churches as a secretary and have some experience with design, but admittedly, churches don't want something wild!

Sincerely,
Denise

Jack -

Thanks.

I guess I did something wrong when I pasted your code into my Google Analytics code.

However, I have a question (and, perhaps, a realization - sorry if this is pretty elementary):

What would make your code apply the color to content background but not to other background?

Dana

If you leave the code in there I can tell what is wrong. Not seeing the code I can only give generic answer. Making any sort of typo will make it not work or not copying ALL the data I showed - that includes the 'style' statements.

What I posted works on your site (standard sites use a different name - in case anyone not on responsive reads this).

Each area is controlled by different CSS (or HTML). Sometimes a sub-area will "inherit" (use) the color from another higher level style - if not designated. Or to put it another way, there are Layers of control. For example, the menu is nested within the '#wrapper'.

'Announcements' (as on your home page) are controlled by HTML "table" color vs the recommended CSS design rules - mainly a 'purist' argument. IMO whatever works is fine - but gets a bit confusing This is a byproduct of CC evolution that used tables extensively in the earlier versions.

There are styles for the top, main area, left, right and bottom as well as content styles inside of those. Each with different names. Changes have to match either the style or HTML area.

Thank you - I reinserted the code.

The code is -inside- a script tag. Also there are two ;; at the end of color. Just use one ;

Main issue is being inside a script. 'style' statements are done outside of scripts. The 'script' is eating the code so to speak

So just move to the end after the /script that is there, remove the ; and you are good to go.

Thank you. I believe that I did what you recommended, but the content background still is white.

Dana - please take another look and then review the code that I updated on the Preferences page.

Thank you - it works!

Do I gather correctly that you commented out the end-of-line punctuation?

I added the !important so that it supersedes the code on the page.

Thank you.

Do you expect that CC will give admins the ability to change the content background color?

Sorry, had to help son start car.

Forgot about the CC code moving stuff around.

What happened here is that CC page generator moved your code to the TOP of the page vs the bottom where analytics starts. That's because of the google script. Then the -later- CC style came back and overrode your color since it was last. ( That's why Denise works and yours did not. The CC code needs to be made a tad smarter, that's all.)

You can prevent that by putting the google code inside a file, save on your site, then reference using src="yourgooglecode.js". That bypasses the 'move' by the CC code since it won't think there is any analytics code. (That's how I did it.)

Not sure if CC code will move ALL code there if it finds Google code?

The thing Kyle did is OK, but one has to be careful in the general case that it doesn't override too many things. It's slightly better to not have to use !important

P.S there are still too many ;, just one there. My error in the original post.

Thank you.

I am inclined to leave things as they are , for now, because they are working.

However, I am curious: How would I save Google Analytics code in a file on my site?

Paste the code you have for Google, MINUS the < script > and < /script > in Notepad (or any raw text editor) and save on your computer as google-analytics.js (Can be any name).

Now upload to your File vault. Next example shows how to code this in the google analytics area. Replace with YOUR File vault location. I replaced our domain name with https://classcreator.com out of habit because that's what you have to do for FB scripts if you start using scripts for various custom 'widgets'. Won't show on FB unless site has a https variant.)

<script type="text/javascript" src="https://www.classcreator.com/yourfilevaultcodenumbers/userfiles/file/html/google-analytics.js"> </script>

And yes, it looks like if the CC code finds google-analytics code it moves EVERYTHING to the top of the page in the header area. Makes for a lot more work adding !important (and can have unintended consequences too).

That code area change was also a later development to make it more likely that Google would record a visit even before a page fully loaded. But if a visitor exited before your page loaded is that really a visit?

Don't forget you can prototype style changes on any page just by inserting 'style' in source mode on a page. That's the easiest way to check how it will look vs putting it in analytics and having to click a page to see. IOW, just "preview" does the trick. That works because it will always be after CC style pages (excluding !important though - so that's another drawback right away).

Dana Shultz wrote:

Thanks for all of the info. I am starting to get a glimpse of how complicated and sophisticated the CC setup is.

You are welcome. I'm happy it was useful. I wish there was a more technical topic area here. For those of us interested in tinkering to set a site apart from the rest.

Even with the current 'responsive', one site pretty much looks like any other. (Shifting the analytics code to a 'file' is more or less a requirement though, since it removes a level of complexity and makes testing a lot simpler.)

The one other thing you might be interested in is fixing the background so it doesn't scroll. For mobile, not applicable, but for full size displays can be interesting. Not sure why CC didn't offer that as an option - probably another oversight.

Your background right now would not benefit much, but most backgrounds do not tile well. It's also possible to dynamically alter the background just for fun. ATM I just shift ours around to show different 'faces' but I should spend some time to literally switch.

I too realized/learned from this why some admins couldn't get overrides to work. I totally forgot about the analytic code movement since I bypassed that years ago. Stuff like this could be documented by CC, NOT a video, but real documentation.

I may revisit this topic soon, as I could never get it to work. It looked fine in the preview mode, but in live mode, the background is still white. I had success with CSS on other pages, and I added the Google-Analytics, but alas the background is still white. At the time, I had bigger fish to fry, but now I have "a little" time to "play".

Did you see the !important issue above? That has to be done if put in Google Analytics, but not if just testing a page to see.

Editor is technically NOT integrated with Responsive Design - does not know about all the added CSS in Responsive. So what it shows and what ends up displaying is different if your CSS (or for that matter things like table colors, etc) get overridden by CC CSS/HTML5 rules.

If you make the page visible to anyone, we can see what is going on.