News:

SMF 2.1.2 has been released! Take it for a spin! Read more.

Main Menu

Blue Evolution 2.1

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

Previous topic - Next topic

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 view this attachment.

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.
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

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 view this attachment.

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

I'm not on pc until Friday so can't edit site.

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 view this attachment.
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

#26
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


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 view this attachment.

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 view this attachment.
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??

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 view this attachment.

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 view this attachment.
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

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

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


Home of Chart Tracker Elite, Apollo & DJ 2020, Coming soon The Librarian.

TwitchisMental

#39
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: