Burnt

[TwitchisMental]

Link to the theme


Burnt
A dark burnt looking responsive theme


Patch Notes:

Code Select Expand

1.0 : Initial Release

Code Select Expand

1.0.1 :
New Feature: Built In Forum Width Adjustment.
Adjustment: Adjusted the Progress Bar background color and text color.
Adjustment: Changed the on/off board icons to match the theme better.
Adjustment: Adjusted the border color on the buttons.
Adjustment: Cleaned up the CSS and put the CSS variables in alphabetical order.
Adjustment: Adjusted the z-index for the more smiley box to prevent overlap issues.
Adjustment: Adjusted the text color within the profile summary section for legibility reasons.

[Steve]

Geez, about time!

Just kidding!

Looks good on initial install. 

Edit: when going to Admin -> Themes and Layout -> Manage and Install the text in the bottom section (where you would add a theme) is black and difficult to read. My personal opinion is that it should be white so that it's easier to read and matches the rest of the page.

Another thing that is solely my personal preference, I commented out the background of the copyright area. The copyright is still easily legible. Take a look and see what you think.

Edit 2: If one tries to highlight a selection of text, while it is actually selected, there is no indication that it's been selected ... no color change, nothing.

[TwitchisMental]

Geez, about time!

Just kidding!

Looks good on initial install. 

Edit: when going to Admin -> Themes and Layout -> Manage and Install the text in the bottom section (where you would add a theme) is black and difficult to read. My personal opinion is that it should be white so that it's easier to read and matches the rest of the page.

Another thing that is solely my personal preference, I commented out the background of the copyright area. The copyright is still easily legible. Take a look and see what you think.

Edit 2: If one tries to highlight a selection of text, while it is actually selected, there is no indication that it's been selected ... no color change, nothing.

Hummm some of that I thought I had done already.. New version uploaded which includes the ACP text color fix and fixes the highlight issue.

[Antechinus]

Nice touch on the cat bars. ::before pseudos?

[TwitchisMental]

Nice touch on the cat bars. ::before pseudos?

Nope, actually a-bit simpler than that.

Code Select Expand

--cat_bg_img: url(../images/custom/cat_bar_left.png) no-repeat, url(../images/custom/cat_bar_right.png) top right no-repeat, url(../images/custom/cat_bar_mid.png) repeat-x;
I was going to use psuedos before seeing it done like that on an IPB theme.

[Antechinus]

Lol. I am not sure that is simpler at all. First you have to make three images. Then you have to write the code to call them. Then they have to be called and cached...

If you use a pseudo instead:

Code Select Expand

.cat_bar::before {
display: block;
height: 10px; /* Your choice of height. */
margin: 0 40px; /* However wide you want the gap at each end. */
background: hsl(0, 100, 50); /* Your choice of colour. */
content: ''; /* Empty is fine, but is required for a pseudo to display. */
border-radius: 0 0 1em 1em; /* As you like... */
}

And obviously you can add border,  box-shadow, etc if you want to. All easy to change without an image editor. Can use CSS variables to change the colour by theme variant easily. Etc.

[TwitchisMental]

Lol. I am not sure that is simpler at all. First you have to make three images. Then you have to write the code to call them. Then they have to be called and cached...

If you use a pseudo instead:

Code Select Expand

.cat_bar::before {
display: block;
height: 10px; /* Your choice of height. */
margin: 0 40px; /* However wide you want the gap at each end. */
background: hsl(0, 100, 50); /* Your choice of colour. */
content: ''; /* Empty is fine, but is required for a pseudo to display. */
border-radius: 0 0 1em 1em; /* As you like... */
}

And obviously you can add border,  box-shadow, etc if you want to. All easy to change without an image editor. Can use CSS variables to change the colour by theme variant easily. Etc.

Sure that works, but unfortunately you can't create a cat_bar image or header image like the one I have using just css.

So no matter what in this case, images are at play. Which is why I find the way I did it to be just fine.(Sure beats how I did it in ClassyTeal which included adding separate divs lol)

[Antechinus]

Sure that works, but unfortunately you can't create a cat_bar image or header image like the one I have using just css.

Try me.
But sure, if you have a particular case where an image works best then using an image is fine.

[TwitchisMental]

Sure that works, but unfortunately you can't create a cat_bar image or header image like the one I have using just css.

Try me.
But sure, if you have a particular case where an image works best then using an image is fine.

You are welcome to try .

The stuff you can do with CSS nowadays never ceases to amaze me haha.

[Steve]

Hummm some of that I thought I had done already.

Hey, ya know, ya get older, ya start forgettin' things ... 

Thanks for the update. 

Edit: highlighting doesn't work in any ACP settings boxes.

[TwitchisMental]

Hummm some of that I thought I had done already.

Hey, ya know, ya get older, ya start forgettin' things ... 

Thanks for the update. 

Edit: highlighting doesn't work in any ACP settings boxes.

Just to be sure you do mean where you click and drag the mouse to highlight things for like copy and pasting yes?

If so, it should be working for sure. Perhaps try clearing the cache?

[Steve]

Just to be sure you do mean where you click and drag the mouse to highlight things for like copy and pasting yes?

Yes. I was trying it in Firefox and saw no highlighting.

In Chrome, I can barely see it highlighting. The difference between highlighted and not highlighted is small.

And I was attempting to highlight in the theme's settings.

[TwitchisMental]

Just to be sure you do mean where you click and drag the mouse to highlight things for like copy and pasting yes?

Yes. I was trying it in Firefox and saw no highlighting.

In Chrome, I can barely see it highlighting. The difference between highlighted and not highlighted is small.

And I was attempting to highlight in the theme's settings.

Hummm

Try this

open index.css

Find:

Code Select Expand

::selection {
    text-shadow: none;
    background: rgb(232, 143, 113);
    color: var(--black);
}

Replace:

Code Select Expand

::selection {
 text-shadow: none;
 background: rgb(255,255,255);
 color: var(--black);
}

This should make the highlight background white and the font color black.

If that does not solve the issue, we may be talking about different things.

[Steve]

We're talking about the same thing. That definitely makes the highlight obvious everywhere.

I'll have to find some colors that fit more with the theme.

Thanks Twitch.

[Steve]

Found another very minor issue. When replying to a PM and clicking the 'more' button in the smileys row one gets this:

You cannot view this attachment.

I can scroll to see the whole smiley popup so I don't know if this is even worth changing.

[TwitchisMental]

Found another very minor issue. When replying to a PM and clicking the 'more' button in the smileys row one gets this:

You cannot view this attachment.

I can scroll to see the whole smiley popup so I don't know if this is even worth changing.

Interesting...

Edit: Let me look into this further.. I have derped somewhere.

Edit 2: Actually this seems to be default behavior even on the default theme.

There is a solution though.

Open jquery.sceditor.theme.css

Find:

Code Select Expand

.sceditor-container,
.sceditor-container div,
div.sceditor-dropdown,
div.sceditor-dropdown div {
padding: 0;
margin: 0;
z-index: 5;
}

Replace:

Code Select Expand

.sceditor-container,
.sceditor-container div,
div.sceditor-dropdown,
div.sceditor-dropdown div {
padding: 0;
margin: 0;
z-index: 6!important;
}

[Steve]

Hmm, I was unable to duplicate the issue in any other theme but at any rate, the fix you posted works like a charm! 

[TwitchisMental]

Hmm, I was unable to duplicate the issue in any other theme but at any rate, the fix you posted works like a charm! 

Because by default the generic/admin menus have no background.

If you add a background though.

You cannot view this attachment.

[Doug Heffernan]

Another very nice theme by @TwitchisMental.

[TwitchisMental]

Another very nice theme by @TwitchisMental.

Thank you .