[OBSOLETE] Wide and compact CSS style for the new LoverlsLab site

November 9, 2017

Hello, I like LoversLab site to use the full screen and avoid wasting of space.

I did a CSS replacer in case you like the site the same way I do.

The CSS code is inside the spoiler:

Spoiler


#community_app_menu>li>a {
    -moz-border-radius: 3px;
    -moz-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.02) 0px 0px 0px 1px, rgba(255,255,255,0.05) 0px 1px 0px;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.02) 0px 0px 0px 1px, rgba(255,255,255,0.05) 0px 1px 0px;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.02) 0px 0px 0px 1px, rgba(255,255,255,0.05) 0px 1px 0px;
    color: #9a9a9a;
    display: block;
    height: 24px;
    line-height: 24px;
    outline: none;
    padding: 0px 15px;
    position: relative;
}

#header > div {
    background: url(http://www.loverslab.com/resources/img/header_bg.jpg) no-repeat;
    background-size: 100%;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
    height: 64px;
}

#header > div > div {
    margin-top: 5px;
}

#secondary_links img {
    height: 16px;
    margin: 4px -4px 0 -4px;
    opacity: 0.8;
    position: relative;
    vertical-align: top;
    width: 16px;
}
.ipsLayout_container.ipsLayout_minimal {
    width: calc(100% - 10px);
    max-width: 100%;
}
.ipsLayout_container.ipsLayout_container {
    width: calc(100% - 10px);
    max-width: 100%;
  	margin: 0px;
}
.ipsLayout_container {
    width: calc(100% - 10px);
    max-width: 100%;
}
#secondary_navigation {
    background: #1d1d1d url('http://odium.loverslab.com/public/style_images/carbon_blue/secondary_nav_bg.png') repeat-x 0 0;
    border-bottom: 1px solid #252525;
    line-height: 24px;
    overflow: hidden;
    text-shadow: rgba(0,0,0,0.8) 0px -1px 0px;
}

#secondary_navigation a {
    color: #d7d7d7;
    height: 24px;
    line-height: 24px;
}

#user_navigation .user_photo {
    border: 1px solid rgba(0,10,120,0.1);
    height: 26px;
    margin: -3px -9px 0px -9px;
    position: relative;
    width: auto;
}

.cAuthorPane_author {
    height: 26px;
    line-height: 26px;
    margin: -15px -10px 16px -10px;
}

.cForumList .ipsDataItem_unread .ipsDataItem_title:before, .cForumGrid_unread .ipsPhotoPanel h3 a:after {
    background: #4499FF;
    color: #029;
    content: "NEW";
}

.cPost .cPost_contentWrap {
    height: calc(100% - 32px);
    margin-top: -18px;
    padding-bottom: 24px;
    padding-top: 0px;
}

.cPost .ipsComment_controls {
    background: none;
    border-color: rgba(255,255,255,0.1);
    border-radius: 0px;
    border-width: 0px 1px 0 0;
    color: #5490c0;
    height: 17px;
    line-height: 10px;
}

.focus-post-buttons .cTopic .ipsComment_controls {
    color: #dddddd;
    padding: 5px 0;
    line-height: 1.65rem;
    font-weight: bold;
    font-size: 0;
}

.cPost .ipsComment_controls a, .cPost .ipsComment_controls .ipsButton.cMultiQuote {
    background: none;
    border-color: rgba(255,255,255,0.1);
    border-radius: 0px;
    border-width: 1px 1px 0 0;
    color: #5490c0;
    height: 17px;
    line-height: 14px;
}

.cPost .ipsComment_meta {
    border-bottom: 1px solid transparent;
    font-size: 1.2rem;
    height: 26px;
    line-height: 26px;
    margin-bottom: 2px;
    padding-top: 0;
}

.cke_skin_ips .cke_contents {
    height: 640px;
    margin: 5px;
}

.cke_toolgroup {
    background: #4d4d4d ;
    background-image: linear-gradient(to bottom,#122324,#101213) ;
    border: 1px solid #101213 ;
    border-bottom-color: #101213 ;
    border-radius: 3px ;
    box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset ;
    float: left ;
    margin: 0 6px 5px 0 ;
}

.col_c_icon {
    padding: 2px 2px 2px 8px ;
    vertical-align: middle;
    width: 33px;
}

.ft {
    margin-right: 4px;
}

.ipsApp .ipsButton {
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 20px;
    padding-bottom: 2px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2px;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

.ipsApp .ipsSpacer_bottom, .ipsApp .ipsSpacer_both {
    margin-bottom: 4px;
}

.ipsComment {
    margin-bottom: 4px;
    padding: 0;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: relative;
}

.ipsDataItem_main, .ipsDataItem_stats, .ipsDataItem_lastPoster, .ipsDataItem_generic, .ipsDataItem_modCheck, .ipsDataItem_icon {
    padding-bottom: 1px;
    padding-top: 1px;
}

.ipsDataItem_title {
    margin-bottom: 1px;
}

.ipsDataItem_unread .ipsDataItem_lastPoster a.ipsContained {
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
}

.ipsDataItem_unread .ipsDataItem_title {
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
}

.ipsLayout_container {
    max-width: 100%;
}

.ipsLikeRep {
    background: none;
    line-height: 12px;
    padding: 0;
}

.ipsLikeRep .ipsButton {
    line-height: 12px;
    vertical-align: top;
}

.ipsPad_half, .ipsApp ul.ipsPad_half, .ipsApp ol.ipsPad_half {
    padding: 2px;
    padding-bottom: 2px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 2px;
}

.ipsReputation_count {
    font-size: 1.1rem;
    line-height: 12px;
    vertical-align: top;
}

.ipsStreamItem_condensed.ipsStreamItem {
    margin-bottom: 1px;
    margin-top: 1px;
}

.ipsStreamItem_condensed.ipsStreamItem.ipsStreamItem_contentBlock {
    padding: 1px;
}

.ipsStreamItem_time {
    font-size: 8px;
    line-height: 12px;
}

.ipsStreamItem_unread .ipsStreamItem_title, .ipsStreamItem_unread .ipsStreamItem_titleSmall {
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
}

.ipsThumb_small {
    max-height: 32px;
    max-width: 32px;
}

.ipsType_normal.ipsType_richText.ipsContained {
    border-collapse: separate;
    padding-top: 20px;
}

.ipsType_sectionHead.cAuthorPane_author {
    height: 36px;
    padding-top: 16px;
}

.maintitle {
    -moz-border-radius: 4px;
    -moz-box-shadow: inset rgba(255,255,255,0.15) 0px 0px 0px 1px;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: inset rgba(255,255,255,0.15) 0px 0px 0px 1px;
    background: #31485c url('http://odium.loverslab.com/public/style_images/carbon_blue/maintitle.png') repeat-x 50% 0;
    border-radius: 4px;
    box-shadow: inset rgba(255,255,255,0.15) 0px 0px 0px 1px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    overflow: hidden;
    padding: 4px;
    text-shadow: rgba(0,0,0,0.4) 0px -1px 0px;
}

.nav-bar, .ipsType_sectionTitle {
    background-blend-mode: overlay;
    background-image: none;
    height: 36px;
    padding-top: 8px;
}

.nav-bar, .ipsType_sectionTitle, .cPost:before, #elMobileNav {
    background-blend-mode: overlay;
    background-image: none;
    height: 26px;
}

.nav-bar.hide-minimal {
    background-blend-mode: overlay;
    background-image: none;
    height: 40px;
    padding-top: 1px;
}

.wrapper {
    background-color: rgba(2,12,101,0.3)
;
    margin: 0 auto;
    max-width: 100%;
    min-width: 980px;
    width: 100%;
}


.ipsApp.cke_combo_button {
    background: linear-gradient(180deg, #152425, #152425, #152425, #101010, #101010) !important;
    border-bottom-color: #979797;
    border-radius: 4px;
    box-shadow: 0 0px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset ;
    cursor: default ;
    display: inline-block ;
    margin: 0 6px 5px 0 ;
    height: 33px;
    padding-top: 8px;
}

a.cke_combo_button {
    background: linear-gradient(180deg, #152425, #152425, #152425, #101010, #101010) !important;
    border-bottom-color: #979797;
    border-radius: 4px;
    box-shadow: 0 0px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset ;
    cursor: default ;
    display: inline-block ;
    margin: 0 6px 5px 0 ;
    height: 33px;
    padding-top: 8px;
}

a.ipsContained ipsDataItem_unread {
    color: #226e9f;
    font-weight: bold;
}

a.ipsType_break.ipsContained ipsDataItem_unread {
    color: #44FF99;
}

a[data-mentionid] {
    background: #4499FF;
    border-radius: 2px;
    color: #029;
    display: inline-block;
    font-size: 90%;
    padding: 0px 5px;
    text-decoration: none;
}

div#branding {
    height: 64px;
}

div#logo {
    margin-top: 6px;
}

div#primary_nav {
    float: right;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-top: 64px;
    text-transform: uppercase;
}

h2.ipsType_sectionTitle.ipsType_reset.cForumTitle {
    background-blend-mode: overlay;
    background-image: none;
    padding-top: 2px;
}

html .cMessage_members > ol > li {
    border-right: 2px solid #f0f0f0;
    line-height: 12px;
    margin: 1px 1px 1px 0;
    padding-right: 15px;
}

table.ipb_table td {
    padding: 2px;
}

.cke_button_icon.cke_button__ipsspoiler_icon {
    background-image: none;
    width: 16px;
}

.cke_button__ipsspoiler:before {
    color: white;
    content: '';
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    text-align: left;
    display: inline-block;
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    padding-top: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0,0);
    margin-left: -16px;
}

To use it you need a CSS injector.

I recommend Stylebot for Chrome and Stylish for FireFox.

I am using Chrome!

Spoiler

Replace the CSS class with the following one.


.ipsType_sectionHead.cAuthorPane_author {
    height: 36px;
    padding-top: 16px;
}

I am using FireFox!

Spoiler

Replace the CSS class with the following one.


.ipsType_sectionHead.cAuthorPane_author {
    height: 36px;
    padding-top: 7px;
}

Here is a comparison of the main page, a thread page, and the download page with my CSS (left) and the standard CSS (right).

Spoiler

How to use it (Chrome and Firefox):

Spoiler

Get Stylish plugin (Chrome: Stylish, Firefox: Stylish)

Once installed, go to the LoversLab style I created: LoversLab Wide and Compact

Click on

You may need to confirm the installation and refresh the LoversLab page.

Andy14 · November 9, 2017

Alternatively, one could offer for lovers of Fullscreen also an alternative CSS.

A CSS and in the classes ipsLayout_container simple remove the width and max-width.
BTW: The class ipsLayout_container is declared at least 3 times. 2 times too much.

November 9, 2017

In my original post I pasted the CSS twice...

Fixed.

Just keep in mind that I am still working on it, and Ashal is working on the main one. So I may need to update it probably often.

*darkevilhum* · November 10, 2017

This is a load off, nice and neat with no wasted space thank you for saving my eyes :cool: . Will Ashal be implementing your css tweaks to the base when he's done?

Azazellz · November 10, 2017

Good to hear!

But how about to add this CSS-style as a new theme, so any user can enable this theme at very bottom left corner? Like "IPB Light", "Carbon", and "Carbon - Full Width".

Brvtality · November 10, 2017

Very clean, no wasted space. Nice!

Brvtality · November 10, 2017

Just noticed something, the sn's are sunk down into the bar what do I edit in the script to bring those back up a bit?

November 10, 2017

30 minutes ago, brvtality said:

Just noticed something, the sn's are sunk down into the bar what do I edit in the script to bring those back up a bit?

I will fix it later today.

Brvtality · November 10, 2017

29 minutes ago, CPU said:

I will fix it later today.

No rush dude, you're doing so much amazing work. Thanks a lot!

November 10, 2017

Updated the CSS with some fixes.

in case you have problems, please post a screenshot and tell me what is the browser you are using.

Brvtality · November 10, 2017

Firefox here.

November 10, 2017

11 minutes ago, brvtality said:

Firefox here.

Did you apply the one I posted 10 minutes ago? In case, can you confirm that you still have the problem?

November 10, 2017

Improved the rendering for FireFox.

There is a CSS class that has to be tweaked in a specific way for the two browsers.

Please set the correct value in case you are using FireFox.

Brvtality · November 10, 2017

32 minutes ago, CPU said:

Improved the rendering for FireFox.

There is a CSS class that has to be tweaked in a specific way for the two browsers.

Please set the correct value in case you are using FireFox.

Yep the Firefox edit did the trick, thanks!

*DeepBlueFrog* · November 11, 2017

Is this the same as the 'Carbon - Full width' theme available in the footer of the page?

November 11, 2017

No it is not the same. This one has a more "compact" style.

Just added an extra class to have the members of a PM to be smaller, so they can be more in a single PM with many participants.

*darkevilhum* · November 13, 2017

Hey CPU, Would you mind putting up a version that's still compact/center aligned but with all the other formatting/space efficient tweaks?

I get a lot of empty space caused by the wide variant on my screen setup, comparatively the compact version is easier and more like the old LL style.

http://puu.sh/yl1YF/20122737ec.png

November 13, 2017

44 minutes ago, darkevilhum said:

Hey CPU, Would you mind putting up a version that's still compact/center aligned but with all the other formatting/space efficient tweaks?

I get a lot of empty space caused by the wide variant on my screen setup, comparatively the compact version is easier and more like the old LL style.

Reveal hidden contents

http://puu.sh/yl1YF/20122737ec.png

I am not really sure to understand what change you want to do.

Do you want a version with all the tweaks but the one to have the site full width?

Vauria · November 13, 2017

Any chance this theme will get published as part of the site like IPB Light and Carbon (and Carbon Full Width) before it disappeared)?

*myuhinny* · November 14, 2017

@CPU

Is there a tutorial on how to use this? I have literally never used a CSS injector before and trying to make it work but it's not working which is one of the reason's I was staying back on the real LL but now that we are back on the can't zoom in or lose everything on the screen again site I need to figure out how to get it working so that I can zoom in like I used to be able to do on the real LL.

TomatoEddie · November 14, 2017

hello, Myuhinny,

6 minutes ago, myuhinny said:

@CPU

Is there a tutorial on how to use this? I have literally never used a CSS injector before and trying to make it work but it's not working which is one of the reason's I was staying back on the real LL but now that we are back on the can't zoom in or lose everything on the screen again site I need to figure out how to get it working so that I can zoom in like I used to be able to do on the real LL.

are you using Chrome?

November 14, 2017

32 minutes ago, myuhinny said:

@CPU

Is there a tutorial on how to use this? I have literally never used a CSS injector before and trying to make it work but it's not working which is one of the reason's I was staying back on the real LL but now that we are back on the can't zoom in or lose everything on the screen again site I need to figure out how to get it working so that I can zoom in like I used to be able to do on the real LL.

I will add a couple of tutorials later today.

*myuhinny* · November 14, 2017

Yeap chrome all the way. The lag demon from hell is upon us grab the pitchforks and start poking it to get it to go away.

@CPU

Thank you very much will be helpful for the ones that have never used something like CSS before.

TomatoEddie · November 14, 2017

hey, CPU,

24 minutes ago, CPU said:

I will add a couple of tutorials later today.

since you're going to do it, i won't. :-) if you need any help, though, just ask.

wish you the very best — and thanks.

November 14, 2017

At the moment I just did a small update.

Now also the editing of posts toolbar correctly shows the "Spoiler" and the "Size" and "Font" buttons look like the other buttons.

Sign In

[OBSOLETE] Wide and compact CSS style for the new LoverlsLab site

Recommended Posts

Guest

Guest

Guest

Guest

Guest

Guest

Guest

Guest

Guest

Guest

Archived

Recently Browsing 0 members