Support Forum

Hey Alex,

No, you should have a read on the Creating a Child Theme codex page..

If you're only changing CSS then your child theme stylesheet only needs to contain the changes.

For example, if all you want to do is change the colour of profile links in topic view, the only thing you would need in your child themes stylesheet is that one change, so the entire child theme stylesheet would look like:

/*  ================================================
    This is the Reboot Child Theme CSS file
    ONLY add the CSS rules that you need to override
    the main rules form the parent Unified theme.
==================================================== */

#spMainContainer .spTopicPostSection .spUserSection .spProfilePopupLink {
    color: red;
}

This is loaded after the parent reboot.php so it overwrites the original rule but nothing else.

Also, your child theme stylesheet is as standard a CSS doc so it can only contain CSS and not PHP variables as the original reboot does, unless you want to change the extension to .php and also update the child theme stylesheet name in spTheme.txt in the root of your child theme.

Just to add, we are aware the text at the top of the child theme stylesheet says 'Unified theme' and we have a ticket open to update them.

You're some of the way there.. You need to think of CSS a bit differently.

The #ID and .Class (i.e '#spMainContainer .spTopicPostSection') can be re-used over and over again with different rules but those rules in every instance of the ID's and Class will always exist. When using the same rule such as 'color' it's only the last instance of the color rule that will be applied.

Think of it like stacking blocks..

So if you had this as your child theme stylesheet:

/* ================================================
This is the Reboot Child Theme CSS file
ONLY add the CSS rules that you need to override
the main rules form the parent Unified theme.
==================================================== */
 
#spMainContainer .spTopicPostSection {
    border: 1px solid red;
}

#spMainContainer .spTopicPostSection {
    border: 1px solid black;
}

#spMainContainer .spTopicPostSection {
    border: none;
}

then you would end up with a topic post section that had no border.

Basically, there's no need to include all the rules that already exist in the parent theme so your child theme stylesheet just needs to have:

/* ================================================
This is the Reboot Child Theme CSS file
ONLY add the CSS rules that you need to override
the main rules form the parent Unified theme.
==================================================== */

#spMainContainer .spTopicPostSection .spPostUserAvatar img { width: 75px; }

#spMainContainer .spTopicPostSection {
    border: none;
}

All the other rules for spTopicPostSection will still exist in the parent, but by removing the border rule it just picks it back up from the parent. By adding border: none; it overwrites the parent border rule.

Does that make sense? I never was that good a teacher!

You've got it..

And if you're having cache problems while editing CSS, you should always be able to disable the cache in the browser options, or if anything set the cache size to 0kb.