Hi there,
First of all, thank you for providing the opportunity for our community group to have a website. I'm just playing about with the look of the site at the moment, before I begin adding information, but I have a couple of queries I'm hoping someone can help me with.
I'm only looking to have a very simple site; mostly text and just a couple of images. Ideally, however, I would like to customise the theme a little, to bring it in line with the charity's (Girlguiding) branding guidelines. My exerience with CSS is practically non-existent, but I have been trying very hard to learn! Unfortunately every slight change (and so far it's only been colour codes!) I make seems to mess up the entire website.
I'm using the 'white menu with blue dotted lines' theme and like it very much. The elements I need to modify are:
- the font and colour of the website title at the top of the page
- the colour of the dotted lines
- the font and colour of the page titles (eg 'Home' etc)
- the font and colour of the side bar
- the background colour
- the font and colour of the (I-don't-know-what-they're-called) menus at the top of the screen (eg Home > About Us > Our Unit)
I would be very grateful if someone could help me do so, ideally explaining it as though I've never touched a computer before!
Oh, and I wondered if it is possible to remove the organisation address from the front page at all? We're happy to have the map centre on the village, but would prefer not to advertise exactly where we meet.
Many thanks =]
Regarding the CSS - yes this isn't entirely straight forward!
The only current way to "tweak" that style would be (as I think you've done?) to save the theme.css file to your computer, edit it, then upload it to your assets library and set it as a custom theme. There are other CSS files needed to make the theme work but if you set the "Version 2" structure when setting the custom theme you should get all those, with your customised CSS file in place.
For tweaking bits of CSS I find my favourite tool is Firebug, which is an add-on to Firefox. Once installed you can right click on any bit of the page and select "Inspect Element with Firebug". Not only will this tell you the rules currently in use to style the element but it lets you edit the style until your happy, and then you can put those changes into your custom CSS file.
We're currently working on some new themes which will be more configurable and will allow you to add a supplemental CSS file rather than having to copy the entire theme CSS. They'll also be mobile and tablet friendly.
As for the organisation address - this is added by the Contact Information includelet. You can remove this includelet to remove all information completely. Alternatively you could give a slightly more vague address in your website settings, as this is where this data comes from for the includelet.
Hope that helps!
Joe - Voice Admin
Hi Joe,
Thanks ever so much for your swift response, it's much appreciated.
Regarding the contact information - I had originally tried to give just the village name in the website settings but it didn't seem to like that and insisted upon having a street name as well. I suspected it was possible to remove the includelet, but no amount of playing about would let me. I had another go though, and by some fluke managed to do it so that's all good!
As for the rest of it(!) I've had a play with Firebug and you're right - it's ever-so helpful for working out exactly what is being edited each time. The dynamic display, where it changes right in front of you is incredibly useful. I managed to get the page looking almost exactly as if it had been produced by our HQ, in terms of colours and fonts, which was fab. The only bit I had hoped to tweak but couldn't fathom was the colour of the dotted lines that run both vertically and horizontally across the page. Is that possible? If not, then I'm hoping that I'll get away with it since it is only a slightly different shade of blue than the official one that we're obliged to use!
So, that all seemed quite promising and I was feeling particularly pleased. Unfortunately I've come unstuck once more at saving and using the theme. I wrongly assumed that I would select all the code in Firebug, paste it into Notepad, save it as a '.html' and upload it to the Assets Library. I did all that, but once again messed up the entire site.
If you wouldn't mind spelling out for me exactly what I'm supposed to be saving and then modifying then I would be very grateful! Am I right in thinking that I ought to be right-clicking on the home page and choosing to 'view page source'? I can get that far all by myself, but then it all seems to go belly-up! When viewing the page source, I'm seeing various bits ending in '.css', several of which have 'v2' in and one of which has 'theme.css' in. I'm confused as to precisely which of these I should be saving.
Doubtless I shall need further clarification when it comes to saving my modifications and uploading them (I think I can work the Assets Library, which must be a start?!) but if you are able to help point out exactly what I should be saving then hopefully that will be a big start!
Once again, thank you ever so much for your services and your help. =]
I don't think its possible to save your edited CSS changes from Firebug. Certainly I've never had any joy doing this. If you make some changes in Firebug and then save the page I very much expect that you won't end up with what you'd hoped for!
Unfortunately doctoring an existing theme isn't as easy as you might hope. I think the main problem is that even if you copy the existing theme.css then any paths that are referred to from that file (images etc) wil now probabaly not work, as they'll be looking for the images as a relative path from your new file, not from where the existing theme is located.
In the nearish future I hope that you will be easily able to specify a "supplemental" CSS file for any theme, which will avoid you having to create a new theme based on an old one. If you can wait a while then I would recommend doing so! If you're really keen to get a new custom theme working based on an existing theme then you need to do something like this:
The first step is to get hold of the CSS rules for the existing theme. There are a few CSS files but most of these are the base stuff for laying out the apps etc which will be included for you anyway, so don't need to worry about these. The key file is the one called theme.css.
In actual fact, in the them you're using, theme.css file loads up two other css files - body.css and style.css. So what we're looking for as a starting point is that you create a new css file that contains the rules from body.css followed by the rules from style.css.
Any URLs referred to from within your newly created CSS file will need to be updated to explicitly load images/etc from the old theme's resources. So for example background-image: url('topBullet.gif'); will need to become background-image: url('/resources/themes/template6e/topBullet.gif'); - and the same for all others.
Once you've done that then you should find that if you upload your new CSS file into the Custom Themes section of your assets library, and then set this as the CSS fiel for the Custom Theme in the Look and Feel settings, then you should have a theme that looks like the old one but is now using your CSS instead.
So, after you've done all that, you can then edit your new CSS file to have your new colours etc and upload a new revision into the assets library.
Like I said, it's all a bit long winded. But have a go if you are feeling confident. Otherwise perhaps wait until we've implemented the change to allow you to upload your own supplemental CSS file to any theme!
Thanks
Joe - Voice Admin