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

TomatoEddie · November 14, 2017

this is how it shows on my Chrome for Mac:

*darkevilhum* · November 14, 2017

On 11/13/2017 at 12:04 PM, CPU said:

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?

Sorry for not being clear, Just want all the tweaks, Minus the wide fit. Prefer it compact in the center of the window. How it is by default basically. All the other space saving tweaks like topic padding/margins are great.

Edit: Even with all the space tweaks you've made, I was personally still finding it hard to look at the site. After another peruse through the CSS i figured it out, the italic headings were making my eyes spaz out, that + the width.

Tweaked it to suit my needs so no worries.

( CSS here if anyone has the same issue, using CPU's latest iteration as of this post. - This is the same as CPU's, minus italic headings and compact center aligned, does not stretch horizontally to the fit the window. )

#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 {
margin: 0;
margin-right: -25px;
}

#ipsLayout_header {
position: relative;
padding-left: 25px;
padding-right: 0;
width: 100%;
}

#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;
}

#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 ;
margin: 0 6px 5px 0 ;
float: left ;
}

.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: normal;
font-weight: bold;
text-decoration: underline;
}

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

.ipsLayout_container {
width: calc(100% - 50px);
}

.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;
margin: 0;
width: calc(100% - 25px);
max-width: calc(100% - 25px);
}

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

.ipsApp.cke_combo_button {
background: linear-gradient(180deg, #152425, #152425, #152425, #101010, #101010) ;
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) ;
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;
}

November 14, 2017

Finalized the style (after the last changes of Ashal on the main theme) and added a small guide to explain how to use it.

November 14, 2017

Damn, when editing posts, all changes seems to be lost.

I will try to fix this problem tomorrow.

*myuhinny* · November 15, 2017

@CPU

Will there be a tweak added to your CSS code to make the zoom work like the old loverslab does? Right now I can't stand how the zoom is set up on the new site a lot more scrolling or a lot more zoom in zoom out zoom in zoom out.

New loverslab at 150% zoom.

Spoiler

Old loverslab at the same 150% zoom.

Spoiler

I'm using the CSS code from your first post and I can tell that it's working as it has changed the stuff above the post box but it doesn't do anything with the zoom. I also tried the stylish addon but for some reason I couldn't get shit to install from that site so I removed it.

November 15, 2017

8 minutes ago, myuhinny said:

@CPU

Will there be a tweak added to your CSS code to make the zoom work like the old loverslab does? Right now I can't stand how the zoom is set up on the new site a lot more scrolling or a lot more zoom in zoom out zoom in zoom out.

New loverslab at 150% zoom.

Reveal hidden contents

Old loverslab at the same 150% zoom.

Reveal hidden contents

I'm using the CSS code from your first post and I can tell that it's working as it has changed the stuff above the post box but it doesn't do anything with the zoom. I also tried the stylish addon but for some reason I couldn't get shit to install from that site so I removed it.

I cannot control the zoom with the CSS, but I may try to rearrange the section contents to be similar to the old one.

I will try it tomorrow.

November 16, 2017

Probably fixed the page to be not at 100% when editing a topic.

Updated the CSS in the first post, and updating the one on the web in a few moments. Remember to re-download or refresh it if using Stylish.

Sign In

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

Recommended Posts

Guest

Guest

Guest

Guest

Archived

Recently Browsing 0 members