• Welcome to Simple Machines Community Forum. Please login or sign up.
January 28, 2022, 08:14:26 AM

News:

SMF 2.1 RC4 has been released! Try it out and help us test! :) Read more.


Blue Evolution 2.1

Started by TwitchisMental, July 16, 2021, 05:28:27 PM

Previous topic - Next topic

TwitchisMental

Link to the theme

Blue Evolution 2.1
This is a remake of my SMF 2.0 Blue Evolution theme.
Description : This is a clean blue and black responsive SMF 2.1 theme.

Main Colors : Blue and Black



Version History -

1.1
Bug Fix : The category description will now adjust based on how long the category title is.

Adjustment : Adjusted the background color for a sticky locked topic.

Adjustment : Adjusted the border color for .children to match the rest of the board index.

Adjustment : Adjusted the border colors for the SMF announcement area in the admin center.

Adjustment : Updated the font color and background color of the new post icon in the message index.

1.2
Adjustment : Fixed the Code Box and Quote Box colors to match the theme

Adjustment : Adjusted the color of the borders in the recent posts section.

Adjustment : Adjusted the color of the subject title link.

JerryLeeThree

It looks good, but I can't get it running. A couple times I installed it, it left smf with no theme at all. And then a couple times it left the screen totally blank. What am I doing wrong? Thanks

shadav

Quote from: JerryLeeThree on July 18, 2021, 07:34:33 PM
It looks good, but I can't get it running. A couple times I installed it, it left smf with no theme at all. And then a couple times it left the screen totally blank. What am I doing wrong? Thanks
how are you installing it?
what version of smf are you running? This theme is made for smf 2.1 rc 4, are you running smf 2.1rc4?

TwitchisMental

Quote from: JerryLeeThree on July 18, 2021, 07:34:33 PM
It looks good, but I can't get it running. A couple times I installed it, it left smf with no theme at all. And then a couple times it left the screen totally blank. What am I doing wrong? Thanks
Which SMF version are you running?
If you are on 2.0 you will want the 2.0 version found here - https://custom.simplemachines.org/themes/index.php?lemma=2601


pocttopus


lurkalot

Quote from: pocttopus on July 20, 2021, 10:08:22 AM
smf 2.1 rc4  :-[



Just tested this theme, and got the same error message.   

Theme has been zipped up incorrectly and is double foddered.   I zipped it up again properly and them installed fine. ;)

TwitchisMental

Quote from: lurkalot on July 20, 2021, 01:07:38 PM
Quote from: pocttopus on July 20, 2021, 10:08:22 AM
smf 2.1 rc4  :-[



Just tested this theme, and got the same error message.   

Theme has been zipped up incorrectly and is double foddered.   I zipped it up again properly and them installed fine. ;)
This should be resolved.  Fixed version has been uploaded.

landyvlad

Nice theme mate I like it !
Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

To paraphrase Kindred: "There are no technical solutions to social problems."

TwitchisMental


mickjav

Hi Installed this theme on my test board but have one issue the banner is not displaying correctly as per picture and how could I move the banner from Left to centre.

I am using Chrome

I am thinking of using it for my support forum.

regards mick

You cannot see attachments on this board.
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

TwitchisMental

September 19, 2021, 09:03:01 PM #10 Last Edit: September 19, 2021, 09:25:27 PM by TwitchisMental
Quote from: mickjav on September 19, 2021, 03:35:14 PMHi Installed this theme on my test board but have one issue the banner is not displaying correctly as per picture and how could I move the banner from Left to centre.

You cannot see attachments on this board.
All you should need to do is increase the height of the header area.

Open custom.css and find

#header {
    background: #1c1b1b url(../images/custom/header.png) repeat-x;
    padding: 2px 2px 12px 2px;
    display: flex;
    align-items: flex-end;
    height: 100px;
}

Change height: 100px to whatever the height of your banner is + 25px. So if your banner is has the height of 150px it would look like

#header {
    background: #1c1b1b url(../images/custom/header.png) repeat-x;
    padding: 2px 2px 12px 2px;
    display: flex;
    align-items: flex-end;
    height: 175px;
}

Example -

TwitchisMental

September 19, 2021, 09:09:40 PM #11 Last Edit: September 19, 2021, 09:23:45 PM by TwitchisMental
Quote from: mickjav on September 19, 2021, 03:35:14 PMHi Installed this theme on my test board but have one issue the banner is not displaying correctly as per picture and how could I move the banner from Left to centre.

You cannot see attachments on this board.

open custom css and find
h1.forumtitle {
    font-size: 1.8em;
    font-family: "Tahoma",sans-serif;
    padding: 0px 0px 2px 4px;
    font-weight: 400;
    flex: 1 1 auto;
}
replace with
h1.forumtitle {
    font-size: 1.8em;
    font-family: "Tahoma",sans-serif;
    padding: 0px 0px 0px 0px;
    font-weight: 400;
    flex: 1 1 auto;
    text-align: center;
}

You will also need to replace the padding under .header from
padding: 2px 2px 12px 2px;
to

padding: 2px 0px 12px 0px;

mickjav

Thanks Worked A Treat
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

TwitchisMental


mickjav

Would it be possible for me to change the home button to my sites homepage instead of forum, Without affecting the breadcrumbs.

I have looked for a home link but have not been able to find it.

thanks mick
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

mickjav

Also just noticed this on the category description

You cannot see attachments on this board.
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

TwitchisMental

Quote from: mickjav on September 25, 2021, 04:51:51 AMWould it be possible for me to change the home button to my sites homepage instead of forum, Without affecting the breadcrumbs.

I have looked for a home link but have not been able to find it.

thanks mick
I do not think there is an easy way to do this through the theme itself unfortunately. I know with SMF 2.0 you needed to edit the Sources/Subs.php to accomplish that.  I believe it is the same for 2.1.  I suggest making a separate topic in the SMF 2.1 Support section to get this information.

Quote from: mickjav on September 25, 2021, 05:00:36 AMAlso just noticed this on the category description

You cannot see attachments on this board.
Open custom.css find(line 118) -
.cat_bar .desc {
    color: #fff;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: 400;
    margin: -22px 0 0 160px;
    background: rgba(0,0,0,0.4);
    width: max-content;
    padding: 3px 6px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.9);
    border-radius: 16px;
    text-shadow: 1px 2px 2px rgba(0,0,0,.2);
}

go to the margin and replace 160px with a higher px amount. I'd suggest this -

.cat_bar .desc {
    color: #fff;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: 400;
    margin: -22px 0 0 170px;
    background: rgba(0,0,0,0.4);
    width: max-content;
    padding: 3px 6px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.9);
    border-radius: 16px;
    text-shadow: 1px 2px 2px rgba(0,0,0,.2);
}


mickjav

Thanks worked a treat, One thing to note was my original one I downloaded was set to 130Px I changed it to 160 and works fine.
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

mickjav

Sorry me again just noticed this see image

the description doesn't allow for longer category names.

I don't really want to increase the margin again as will look weird on smaller named cats.
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

TwitchisMental

Quote from: mickjav on September 26, 2021, 11:16:07 AMSorry me again just noticed this see image

the description doesn't allow for longer category names.

I don't really want to increase the margin again as will look weird on smaller named cats.

Unfortunately that is a flaw in the way I have done the description styling.

I will play around and see if I can find a better solution.

Lets consider this a bug that is being looked into.

shadav

you could maybe set the description to floatright

TwitchisMental

Quote from: shadav on September 26, 2021, 03:22:00 PMyou could maybe set the description to floatright
That would be a quick fix but I don't like it all the way over there lol.

Trying to figure out a way to make the description move over depending on the cat title. So far no luck.

Diego Andrés

You could remove the negative margin and add a display: inline
You cannot see attachments on this board.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Antechinus

Yes, inline would work. So would inline-block, or flex. Although flex would depend on exactly how the child elements were handled.

mickjav

That looks good maybe a couple of mm spacing between the two
Quote from: Diego Andrés on September 26, 2021, 04:18:29 PMYou could remove the negative margin and add a display: inline
You cannot see attachments on this board.

That looks good maybe a couple of mm spacing between the two.

I'm not on pc until Friday so can't edit site.
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

TwitchisMental

Quote from: Diego Andrés on September 26, 2021, 04:18:29 PMYou could remove the negative margin and add a display: inline
You cannot see attachments on this board.
Sorry for the late reply. This and one other small tweak does resolve the issue. Thank you for the solution.
Quote from: Antechinus on September 26, 2021, 04:28:28 PMYes, inline would work. So would inline-block, or flex. Although flex would depend on exactly how the child elements were handled.
Good to know thank you.

Here is the manual fix for anyone who wants to manually fix this. I will also be uploading a fixed version soon, I have one or two other small things to adjust.

open custom.css and find .cat_bar .desc (line 118)
.cat_bar .desc {
    color: #fff;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: 400;
    margin: -22px 0 0 170px;
    background: rgba(0,0,0,0.4);
    width: max-content;
    padding: 3px 6px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.9);
    border-radius: 16px;
    text-shadow: 1px 2px 2px rgba(0,0,0,.2);
}

change to

.cat_bar .desc {
    color: #fff;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0px 0px 0px 10px;
    background: rgba(0,0,0,0.4);
    padding: 3px 6px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.9);
    border-radius: 16px;
    text-shadow: 1px 2px 2px rgba(0,0,0,.2);
    display: inline;
}

We are adding the display : inline to resolve the issue. This allows the cat title to be as long as needed and the description will be beside it right inline ;).
We are also removing the width: max-content. We are doing this since it will no longer have any effect overall due to use using display: inline.

open custom.css and find div.cat_bar(line 103)

div.cat_bar {
    background: #023570 url(../images/custom/catbg.png) repeat-x;
    border-bottom: none;
    border-top: 1px solid #0669d5;
    padding: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: none;
    text-shadow: none;
}

change to

div.cat_bar {
    background: #023570 url(../images/custom/catbg.png) repeat-x;
    border-bottom: none;
    border-top: 1px solid #0669d5;
    padding: 0 0 4px 0;
    border-radius: 6px 6px 0 0;
    box-shadow: none;
    text-shadow: none;
}

We are adding a padding to the bottom of the cat_bar div so it still makes the cat desc div show up in the middle of the overall cat_bar.

Problem Solved -

TwitchisMental

September 26, 2021, 09:51:10 PM #26 Last Edit: September 26, 2021, 10:09:12 PM by TwitchisMental
Version 1.1 has been uploaded.

1.1
Bug Fix : The category description will now adjust based on how long the category title is.

Adjustment : Adjusted the border color for .children to match the rest of the board index.

Adjustment : Adjusted the border color for the SMF announcement area in the admin center.

Adjustment : Updated the font color and background color of the new post icon in the message index.

mickjav

Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

mickjav

Sorry me again, been setting up some default topics for my support site.

Found when I mark a topic sticky and locked the control description text is very hard to read.

See image

You cannot see attachments on this board.
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

TwitchisMental

Quote from: mickjav on September 28, 2021, 04:40:49 AMSorry me again, been setting up some default topics for my support site.

Found when I mark a topic sticky and locked the control description text is very hard to read.

See image

You cannot see attachments on this board.
No need to be sorry. This is how issues are found and resolved.

Looks like I simply missed styling this class.

I will be uploading a new version which will fix this issue.

Edit : Fixed version has been uploaded.

mickjav

How do I update the theme do I remove old one??
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

Diego Andrés

Just overwrite the files, unless you installed mods that modified them.
Although I'm assuming only the css files have been edited.

SMF Tricks - Free & Premium Responsive Themes for SMF.

TwitchisMental

Quote from: Diego Andrés on September 30, 2021, 12:59:53 PMJust overwrite the files, unless you installed mods that modified them.
Although I'm assuming only the css files have been edited.
This is correct, the custom.css is the one you need to replace. :)

mickjav

Hi Just found this when using
["code"]

You cannot see attachments on this board.
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

TwitchisMental

Quote from: mickjav on October 17, 2021, 03:54:34 PMHi Just found this when using
["code"]

You cannot see attachments on this board.
Thank you for reporting this bug. I will upload a fixed version soon.

Quick fix - open the custom.css file and add this to the bottom -

/*Code Box,Quote Box etc */
.bbc_code {
    display: block;
    font-size: 0.85em;
    background: rgba(0,0,0,.2);
    border: 1px solid rgb(6, 105, 213);
    border-radius: 2px;
    margin: 1px 0 6px 0;
    padding: 3px 12px;
    overflow: auto;
    white-space: nowrap;
    max-height: 25em;
}

.bbc_standard_quote {
    background-color: rgba(0,0,0,.2);
}

blockquote {
    margin: 0 0 8px 0;
    padding: 6px 10px;
    font-size: small;
    border: 1px solid rgb(6, 105, 213);
}

blockquote cite {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9em;
    margin-bottom: 3px;
}

Edit : Fixed version has been uploaded.

mickjav

Thanks Works a treat
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

mickjav

Only a Minor Thing Noticed today

See image above the post date time I've set the Topic Title to display as I sometimes have to use different topic titles for each reply.

It's a bit hard to see but that might just be these old eyes of mine lol
Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

TwitchisMental

Quote from: mickjav on October 18, 2021, 04:08:44 PMOnly a Minor Thing Noticed today

See image above the post date time I've set the Topic Title to display as I sometimes have to use different topic titles for each reply.

It's a bit hard to see but that might just be these old eyes of mine lol

Thank you for reporting this. I will upload a fixed version soon.

Quick Fix -

Open Custom.css and add the following to the bottom -

.subject_title a {
    font-size: .9em;
    color: rgba(255,255,255,.5);
    font-weight: 700;
}

mickjav

Database Dreams - music and charts, Home of Chart Tracker Elite, Apollo & DJ 2020.
Coming soon The Librarian.

TwitchisMental

October 18, 2021, 04:45:04 PM #39 Last Edit: October 18, 2021, 05:07:29 PM by TwitchisMental
Quote from: mickjav on October 18, 2021, 04:42:32 PMPerfect Thanks
Also noticed the white borders in your stats section.

Add this to the bottom of the custom.css to fix that aswell -

#ic_recentposts td {
    border-top: 1px solid rgb(6, 105, 213);
    padding: 0 4px 0 0;
    vertical-align: top;
}

Advertisement: