How to customize default theme of 2.1b1?

MasterOne

I was reading through the documentation while playing around with my new 2.1b1 installation, and I think I am doing something wrong in my tries to customize the default theme.

Is theming done differently for 2.1 than before / do themes for 2.0.x need to be especially adapted for 2.1?
Are settings in custom.css supposed to override settings from style.css?
Is there any simple way get have the look of the former 2.0.x default theme back in 2.1?

What I did so far:

I copied themes/default to themes/mytheme, created themes/mytheme/design and themes/mytheme/views, modified about.php, created an empty custom.css in themes/mytheme/design, copied default.master.tpl to themes/mytheme/views and activated mytheme in Appearance >> Themes.

I tried to make some changes by adding modified snippets from style.css to custom.css, but that didn't change anything.

I don't want to make a lot of changes to the default theme, but I would like to have the column on the right side again, not to the left.

The default 2.1b1 theme is not properly displayed with an older browser version of Firefox (namely Iceweasel 3.0.6, which is Debian-rebranded Firefox 3.0.6), see the attached screenshot. The search box is misplaced and the little box showing the number of posts in "All Categories" is misplaced into the "General" category. That's a problem I didn't experience with the default theme of 2.0.18.8 (but I know, that browser version is completely outdated, so no big thing).

BTW Why is the former default theme as "2011Compatibility" in the themes folder, but doesn't show up under Appearance >> Themes?

Tama

Most old browsers, don't support new features - support is often removed for them; with the last 2 versions of a browser supported in most applications.

I myself rebuilt my forum's theme from the ground up, ready for the move to 2.1(when it's released)

MasterOne

@Tama said:
I myself rebuilt my forum's theme from the ground up, ready for the move to 2.1(when it's released)

Did you start with the new 2.1 default theme, or completely from scratch? I still have no idea, why modifications in custom.css are not used. Any hint about general changes in theming between 2.0.x & 2.1 (as all the documentation is still for 2.0.x)?

whu606

@MasterOne

I did a walk through for 2.1 theming in the Vanilla WIki here

You may need to add this line to config.php to see your css changes:

$Configuration['Garden']['DebugAssets'] = TRUE;

MasterOne

@whu606 said:
I did a walk through for 2.1 theming in the Vanilla WIki here
You may need to add this line to config.php to see your css changes:

$Configuration['Garden']['DebugAssets'] = TRUE;

Thanks, will take a look, and study the Wiki as well.

Tama

@MasterOne said:
Did you start with the new 2.1 default theme, or completely from scratch? I still have no idea, why modifications in custom.css are not used. Any hint about general changes in theming between 2.0.x & 2.1 (as all the documentation is still for 2.0.x)?

Since the forum needs to be embeded, I used the EmbedFriendly theme supplied in the 2.1 package, and then using Developer tools in chrome to test out styling/ finding the class that has changed and porting the styling over.

Tama

Heres my code to make sprites white

/* Make Sprites white - for dark theme */
.SpDashboard, .SpOptions, .SpCog {
    background-position: 0 -211px;
}

.SpBookmarks, .SpStar {
    background-position: -80px -245px;
}

.SpInbox, .SpEnvelope {
    background-position: 0 -228px;
}

.SpNotifications, .SpGlobe {
    background-position: -32px -212px;
}

.OptionsTitle {
    background: url("images/ui_sprites.png") no-repeat 0 -101px;
}

White Edit Cog :
https://photos-4.dropbox.com/t/0/AADkCoS0M8wSmkTZ8KUMAd7z6Iz5eUNiodSlzGtsj-53hQ/12/145098899/png/32x32/3/1368309600/0/2/ui_sprites.png/cc8kl8xfqRSQ7PCIwYC47imzLVVCaaC9hNV9uIBeg28?size=1024x768

MasterOne

@whu606

DebugAssets did the trick

I read through your wiki page, which is very informative, but I'm having some troubles:

• If I remove the breadcrumb div from the body, the search results page gets a gap between head and body, making the column shift by the hight of that gap every time you change between the search results page and any other page. I have no idea how this is possible, and where to look in the CSS. With the breadcrumb div in place everything sticks as intended.

• Is there any easy way to move the MeBox into the siteMenu with the username besides the buttons (as it's done in this forum here, where a CSS class MeModuleWrap is used)?

• Is there any easy way to move the search box from the head to either the column (as it was with the 2.0.x default template) or the top of the content (I don't know why but it seems to be impossible to properly position the SiteSearch InputBox)?

Did you start with the default theme and use bittersweet snippets for your modifications, or did you use bittersweet and modify as needed? Your instructions for the TopMenu are a little bit vague, for example you declare class .TopMenu in custom.css, but don't use it in default.master.tpl

@Tama

Unfortuantely you Dropbox link isn't working.

whu606

@MasterOne

I started with BitterSweet theme, and edited it as I went along.

tbh, it's a bit past beer o'clock here, so will have a proper look at your questions tomorrow!

Tama

@MasterOne said:

Tama

Unfortuantely you Dropbox link isn't working.

https://www.dropbox.com/s/77616c96ji14axs/ui_sprites.png

MasterOne

@Tama said:
https://www.dropbox.com/s/77616c96ji14axs/ui_sprites.png

I am sorry, but I don't see the connection to this topic. Is it possible that you have posted to the wrong thread, or is there a part of the discussion missing?

whu606

@MasterOne

Why remove the Breadcrumb div?

If you don't want breadcrumbs, just delete

{breadcrumbs}

from the defaultmaster.tpl

I couldn't work out how to easily set up the MeBox as you would like, so gave up.

Hopefully someone else can put you wise to that.

For the Search Box, in defaultmaster.tpl move this

{searchbox}

to below

{module name="MeModule"}

You'll probably need to do some styling with css to get it looking right.

MasterOne

@whu606 said:
Why remove the Breadcrumb div? If you don't want breadcrumbs, just delete {breadcrumbs} from the defaultmaster.tpl

Removing just {breadcrumbs} leaves an empty BreadCrumbsWrapper div, but it does not matter, because I already tried both (just deleting {breadcrumbs} and removing the whole BreadCrumbsWrapper div) and it always leads to that strange gap between head and body on the search results page.

@whu606 said:
I couldn't work out how to easily set up the MeBox as you would like, so gave up. Hopefully someone else can put you wise to that.

Thought so, I'll look into it, because placing the MeBox in a line with the breadcrumb makes much more sense (specially those using Facebook will find it much more appealing, if all controls are in a line at the top of the page).

@whu606 said:
For the Search Box, in defaultmaster.tpl move this {searchbox} to below {module name="MeModule"} You'll probably need to do some styling with css to get it looking right.

Already tried placing the Search Box in different locations, which kind of worked but did not look right, and getting it to look right with css is the problem now. For example trying to put the SearchBox in line with the TopMenu (as described in your wiki page) always led to it projecting beyond the lower egde of the TopMenu bar, and I could not find a way to center the SearchBox in that Topmenu bar.

I'm not a CSS pro, and since it's been a while I now have to relearn most of it. I think I'm getting there, but not fast enough for that forum to go online the way I want it to look right from the beginning.

I am now going to investigate the Embed-Friendly version 3.0 theme that comes with 2.1b1, as it pretty much assembles the look I want. The only problem I could see on a first look was the total fluid design, which makes it expand completely to the dimensions of the browser window.

Any hint for padding and max-width settings for that theme, so that it can be used as a standalone without actually embedding it?

whu606

In the custom.css of embed theme, try changing this line:

.Row {
   width: 100%;
}

to this:

.Row {
   width: 960px;
}

As you'll have worked out, I'm no pro either.

The best tool for getting the hang of theming, imo, is Firebug for Firefox, or similar tools in Chrome, Safari etc.

You can inspect any element and immediately see what css rules are applied to it, and change them on the fly to see how things would look.

MasterOne

@whu606

I'm already using Firebug, one can not work without it nowadays

Nevertheless Firebug didn't tell me where that gap when removing breadcrumb came from (or I just didn't see it).

Didn't you experience the same problem with that damn gap? I tried with bittersweet as well, and it shows the exact same behavior.

whu606

I'm not quite sure about the gap.

I have a test 2.1 site here if you want to see if it does the same as your site or not.

MasterOne

@whu606

Nice! Is that really a revamped bittersweet theme?

As mentioned, you have the same problem with the Search Box, it does not properly fit into the SiteMenu bar, but project beyond the lower edge (only a few pixels in your setup, but visible).

To check the issue with the gap, you just have to remove the breadcrumb from the body (which is my intention if I want to put it into the SiteMenu bar), then use the Search Box to search for something, and when the search results page is displayed, you will see that the body elements get separated from head by that ominous gap (clearly visible also using Firebug).

whu606

@MasterOne

Yes.

It's pretty much what you'd end up with if you followed all the declarations in the Wiki pages.

I'll have a go repeating the issue a bit later.

MasterOne

@whu606 said:
I couldn't work out how to easily set up the MeBox as you would like, so gave up.

I tracked the MeBox down to applications/dashboard/views/modules/me.php, and what's done here is they replaced MeBox with MeMenuWrapper and some more CSS magic to get picture, username and MeMenu in line. I have to say, that placement is pretty cool and I really want to reproduce it, as it saves quite some space in the column.

I think I really try with the embedded theme as a starting point, and work my way up from there, as it resembles my desired look more than bittersweet.

MasterOne

@whu606 said:
For the Search Box, in defaultmaster.tpl move this {searchbox} to below {module name="MeModule"} You'll probably need to do some styling with css to get it looking right.

I didn't have much time to play around with the new 2.1 Embedded Theme, but it confirms how difficult it is to get that damn Search Box right.

In the Embedded Theme {searchbox} is placed at the end of the column, the column is set to a width of 200px, the width of the searchbox is set to 200px as well, but nevertheless the searchbox exceeds the column to the right! Setting the width of the searchbox to 168px makes it fit properly, but that difference in 32px is very strange.

Why can't it be done to have the the searchbox just sit inside the surrounding container (be it sitemenu or column)?

Two other things that crossed my mind:

• Is a template width of 960px complying to any "standard"? I have seen the use of fixed 960px many times now, and I am wondering if that really is best practice for best site view in on different screen sizes.

• Is the use of "min-width" and "max-width" uncommon, or are there any compatibility issues? A fluid theme with those two restrictions would make quite some sense (I think).

Kasper

In the Embedded Theme {searchbox} is placed at the end of the column, the column is set to a width of 200px, the width of the searchbox is set to 200px as well, but nevertheless the searchbox exceeds the column to the right! Setting the width of the searchbox to 168px makes it fit properly, but that difference in 32px is very strange.

You should familiarize yourself with the CSS box model if you wish to understand why you're seeing what you're seeing. Never the less, the default CSS box sizing model is content-box which excludes padding and border when calculating the width of an element. You can however easily change it to also include these in its calculation:

.Whatever {
    box-sizing: border-box;
    width: 200px;
}

Beware that the box-sizing attribute will need vendor prefixing.

To answer these:

Is a template width of 960px complying to any "standard"? I have seen the use of fixed 960px many times now, and I am wondering if that really is best practice for best site view in on different screen sizes.

960px is a good size for many devices out there, desktops and tablets alike. I usually use a 1140px grid myself and then use @media queries to create adaptive layouts for smaller devices.

Is the use of "min-width" and "max-width" uncommon, or are there any compatibility issues? A fluid theme with those two restrictions would make quite some sense (I think).

Use of these two attributes aren't exactly "uncommon" but I wouldn't go as far as calling them "common" either. They're great for creating responsive layouts, but, again, I personally prefer adaptive layouts as these usually puts me in complete control over the layout. As you mention, they're very useful for responsive, fluid layouts.

Hope that makes sense!