Support Forum

is there a reboot for dummies somewhere? I'm having a heck of a time figuring what all the different colors are trying to make a custom overlay out of one of the current ones.

sincerely,

a dummy

Thanks for the kind words And sorry for the late reply.

Steve is right - We all want a more straight forward overlay system it's just figuring out what works best. For Reboot I pretty much stuck with the Unified overlay layout, but have grouped the buttons into their own section as they were a bit scattered. If unfamiliar with Unified overlays, here is a quick rundown:

In the overlay, you have $baseColor's at the top, and these are called throughout for different elements instead of having individual hex values like in default.

The thinking here, is that instead of going through and changing every single '#007CBA', you can just change the one instance of $baseColor2  =    '#007CBA';

If you change the hex values assigned to $baseColor2 and $baseColor3, with the exception of some text, you will be changing the bulk of the colour throughout the theme. If you don't want a gradient and just want block colour, you can give $baseColor2 and $baseColor3 the same hex value.

I've also put notes next to each $baseColor so people can roughly see where it will be most noticeably used.

I'd suggest that if you are going for a dark colour with white text, you use one of the overlays without the word 'light' in it such as 'blue'. If you are going for black text on a light background, start with one of the 'light' overlays such as 'light-blue'.

The light and dark overlays all have their own icon pack, so a light overlay will have dark icons, and a dark overlay will have light icons. This is called at the top of the overlay such as 'Icons: darkpack'. Just be sure to check the name of the icon pack you want to change as they are named according to the type of overlay, not icon colour.

This is just a bit to get you started, I think it might be wise to wait and answer a few questions before deciding what will be most helpful to people, then I can write up a quick customisation guide when I get the chance.

So - Any questions just ask!

Hey Meztli,

On the gradient question, the best place to get a good understanding of how CSS gradients work is here. It gives you lots of examples and lets you play around with the rules with the 'try it yourself' buttons.

So breaking down the overlay gradients you firstly have:

    $baseGradient1From               =    $baseColor3;
    $baseGradient1To                    =    $baseColor2;

This makes it easy to change the colours of the gradient without having to go through the CSS rules and change it for every browser. As you can see they are called in the next line down '$baseGradient1'.

There is more than one rule, separated with the normal ; in a line for different browsers - I think the only rule in $baseGradient1 you should need to change is 'linear-gradient' rule which is the last, unless you are using something other than FF or IE. The others should be updated after you are happy for cross browser compatibility.

As for the percentage, this dictates how far along (in this case vertically) the div whichever colour - and in turn gradient - you are looking at will generate. For example:

background: linear-gradient(top, $baseGradient1From 0%,$baseGradient1To 100%);

$baseGradient1From sits at 0% and $baseGradient1To sits at 100%, and the gradient will span the rest of the space. If $baseGradient1From was at 50%, you would have a div with 50% block colour and the gradient would fill the remaining 50%.

As for the border question, there isn't a 'border-top' rule, actually it's just a complete black border with a 0.2 opacity. It's actually a bit of an odd one and seems to be a combination of the border and background gradient which causes it, not that it's undesirable!

I could take a look and see about working a top border rule for you if you want to add one?

No problem.

I guess you are working with a child theme, so assuming that-

To add a top border, you will need to make a new variable in your overlay. Find the section 'BASE BORDER COLOURS' - on line 411, and to be a stickler you should really put the new rule under the sub section 'DISPLAY SECTIONS'.

Add something to the list of rules like:

    $genericTopBorder                    =    "1px solid yourcolour";

Of course where you see 'yourcolour' you can use one of the $baseColors as in the other rules, or a hex value. The most important thing is to make sure the CSS is in double quotes.

Save - Then just open reboot.php, find the section you want to add a top border to - and add the rule:

border-top: <?php echo($genericTopBorder); ?>;

Just make sure that you add this rule to the very end of the block of CSS, as if you add it at the top the full 'border' rule it will overwrite it. Having it at the end overrides the full border but only overrides the top so the rest stays in tact.

Generally speaking I suppose the sections you might want to add a top border would be the coloured parts. So maybe add to:

#spMainContainer .spFootContainer {

#spMainContainer .spGroupViewSection .spGroupViewHeader,
#spMainContainer .spForumViewSection .spForumViewHeader,
#spMainContainer .spTopicViewSection .spTopicViewHeader {

#spMainContainer .spHeadControlBar {

#spMainContainer .spMemberGroupsSection .spMemberGroupsHeader {

To name a few!

Hope that helps.