Jump to content

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

Guest

By Guest,
in Off Topic

Recommended Posts

Guest

Guest

Posted
Posted

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

Home Page - CPUHome Page - Default

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Topics and Posts - CPUTopics and Posts - Default

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Downloads - CPUDownloads - Default

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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 image.png

 

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

 

 

Link to comment

Guest

Guest

Posted
Posted

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.

Link to comment
Guest

Guest

Posted
Posted
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?

 

1588efk.png

I will fix it later today.

Link to comment
Guest

Guest

Posted
Posted

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.

Link to comment
Guest

Guest

Posted
Posted

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.

Link to comment
Guest

Guest

Posted
Posted
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

 

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?

Link to comment
myuhinny

myuhinny

Posted
Posted

@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.

Link to comment
TomatoEddie

TomatoEddie

Posted
Posted

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?

Link to comment
Guest

Guest

Posted
Posted
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.

Link to comment
Guest

Guest

Posted
Posted

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.

 

image.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

View Community Rules

Help Support LoversLab

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. For more information, see our Privacy Policy & Terms of Use