style_system | Entries tagged with !needs tag

I just popped a little creature on my journal, in the bottom left-hand corner, which follows the page as visitors read, keeping an eye out for mischief.

(little creature designed by dollarchive.neocities)

Step 1: upload your picture somewhere. Make sure it's small, and has a see through background

Step 2: display the custom 'Text' module on your layout

Step 3: in the Customise Journal > Text screen, include this code in the Text for the 'Custom Text' box:

In the past, you would create invisible boxes and containers to structure your HTML with div boxes. Modern HTML gives you options to do 'semantic html' - so instead of a generic div, you can use tags like header, nav, article and section to do essentially the same thing you do with a div, but screen readers can navigate it more easily and it's nicer to code too

dialog is a rarely used html tag, so we can sneak it in here to target in our CSS, knowing it likely won't appear anywhere else in our css. (Using id selectors didn't seem to work with dreamwidth's code-wrangler; using a div is too generic, as there are several other divs in module-content).

Step 4: go to Customise CSS and paste in the following:

.module-content dialog { position: fixed; z-index: 3; bottom: 0; right: 100%; background: none; border: none; }

This tells the browser how to display the dialog box - moving it out of the Custom Text Module and all the way over the page, where it floats over the webpage.

Step 5: check accessibility. Shrink down the browser window size and use the inspect tool or a website to see how the page looks on mobile. Ensure that it doesn't cover up text you want people to read.

If it's a problem, you can get the Guardian to disappear once the browser window goes under a certain size. Put this code (or similar) into the Customise CSS section:

@media only screen and (max-width: 600px) {.module-content dialog {display: none}}

If the browser window is 600px wide or smaller, the website won't load the Guardian image at all, as if it never existed

Ideas: What creative purposes could you put this to? An animated gif. A pixel animal that moves, reacts or changes when you hover or click on it. A link. Something practical.

Tags:

!needs tag

sheliak

My current layout is Librarian's Dream, and I've been playing with Mobility on my test journal. I've run across a couple things in both that I can't figure out how to wrangle.

Librarian's Dream

1. Multilevel tags: I've noticed that some multilevel tags display oddly. Basically, when there's an x:y:z tag, what's displayed is x:y, and then z as if it had been tagged x:z rather than x:y:z. Does anyone know how to fix this and add an extra indent to third-level tags?

2. The profile icon has a bit of padding underneath it. I'd like to either remove that padding, or add equivalent padding above + to the left, so that the icon appears more centered. Is either of those possible?

Mobility

This is less urgent, I've just been poking at the style and trying to figure out what I can and can't do.

3. Is it possible to make the border disappear on the next/previous button, and the [flat/top level comments only] bar on entries? (Or, for that matter, to get rid of all borders on everything?) I've been able to figure how to turn most borders on and off, but those have eluded me.

4. Is it possible to set a background image for comments, next/previous, archive, tags page, etc, as it is for the entries/modules/header? (I'm trying to use a (hopefully unobtrusive) textured image instead of a solid color, basically.)

5. If the latter is not possible: is it possible to change link & text color only on the next/previous?

(Current Mobility attempts at

beta_lyrae.

Thanks in advance!

Tags:

tropicsbear

In relation to this entry on aligning the text for bullet points, would it be possible to do the same thing for poll options?

Current Mood: hopeful

Tags:

!needs tag

liv

I'm working on converting these Crisped themes to be official site layouts. I've run into a problem with the CSS that makes the navigation control strip match the rest of the layout.

The relevant CSS is as follows:

The problem is that the logged-out version of the nav strip includes a table within a table, for the login form, and this CSS makes all the cells of that table outlined in the entry title colour, which looks kind of awful. So I need to figure out some CSS to turn off border colours in the login form, while leaving them on for the nav strip as a whole.

According to Web Developer the login form looks a bit like this:

I can't figure out which selector to use with border: none in order to switch off the borders for the inner tables. I've tried variations on #lj_controlstrip_login and #lj_controlstrip_login td and #login.lj_login_form but I'm not getting anywhere. Anyone who's clever with CSS inheritance rules have any good ideas?

Current Mood: confused

Tags:

!needs tag

aldro

I'm back with another question regarding currents and tiny icons. I recently changed my layout style and am having trouble aligning the tiny icons. All the tiny icons used in my layout are (supposed to be) 16 pixels. I fiddled around with padding and margin, but can't get the icons of the metadata to align correctly. Any help is greatly appreciated. :-)

My CSS:

/*
Layout: TOP OF THE CLASS
Theme: SPRING BREAK

CREDITS
CSS: Sarken - http://sarken.dreamwidth.org/1751138.html
Icons: Yusuke Kamiyamane - http://p.yusukekamiyamane.com/
Colors: Leowat - http://www.colourlovers.com/palette/1266066
*/

body {
background-color: #8D8589;
color: #444;
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
border: 0;
}

a {
color: #8D8589;
}

a:hover {
color: #B1B7AC;
}

a:visited {
color: #8D8589;
}

#canvas {
margin: 11em auto 0;
padding: 0;
}

#primary {
background-color: #DCF0C2;
width: 100%;
padding: .5em 0 .25em 0;
margin: 0 auto;
clear: both;
}

#primary > .inner:first-child {
padding: 0;
margin: 0;
}

.one-column #secondary {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #EAE7E8;
z-index: 50;
}

.has-navstrip #secondary {
position: absolute;
top: 50px;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #EAE7E8;
z-index: 50;
}

#secondary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#secondary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

.one-column #tertiary {
clear: both;
margin: .5em auto 1em auto;
width: 100%;
font-size: 75%;
color: #EAE7E8;
}

#tertiary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#tertiary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

/*HEADER*/

#header {
position: absolute;
top: 0;
left: 2em;
padding: 0;
margin: .5em;
background-color: transparent;
color: #EAE7E8;
width: 20%;
height: 11em;
z-index: 20;
}

.has-navstrip #header {
position: absolute;
top: 45px;
left: 2em;
}

#header > .inner {
padding: 0;
margin: 0;
text-align: center;
}

h1#title {
padding: 0;
margin: .5em 0 0 0;
font-style: italic;
font-family: Georgia, serif;
font-weight: normal;
font-size: 140%;
}

h2#subtitle {
padding: 0;
margin: 0;
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 90%;
}

h2#pagetitle {
display: none;
}

/*ALL MODULE SECTIONS*/

.module {
margin: 0;
padding: 0;
border: 0;
}

.module a {
color: #DCF0C2;
text-decoration: none;
}

.module a:visited {
color: #C5C88C;
}

.module a:hover {
color: #FCFCFA;
text-decoration: underline;
}

.module .module-header {
color: #C5C88C;
padding-bottom: 0px;
border-bottom: 1px #B1B7AC dotted;
width: 95%;
}

.module .module-header a {
color: #C5C88C;
width: 95%;
}

.module .module-content {
width: 94%;
}

div.module-calendar .module-content a {
text-decoration: underline;
}

div.module-calendar .module-content td.entry-day, div.module-calendar .module-content td.empty-day {
border: 1px #9E9599 solid;
}

.module-userprofile .module-content {
text-align: center;
min-height: 100px;
}

.module-userprofile .userpic {
float: left;
margin-right: .75em;
padding: 2px;
}

.module-userprofile .userpic img {
width: 65px;
height: 65px;
padding: 4px;
border: 1px #9E9599 solid;
}

.module-userprofile .journal-name {
padding-top: 20px;
}

.module-userprofile ul.userlite-interaction-links {
margin-top: .25em;
}

/*TOP MODULES*/

#secondary .module {
float: right;
width: 24%;
background-color: #8D8589;
}

#secondary div.module-navlinks ul.module-list {
padding: .75em 0 0 0;
margin: 0;
}

#secondary div.module-navlinks ul.module-list li {
list-style: none;
}

#secondary div.module-navlinks ul.module-list li a {
display: block;
background-color: #B1B7AC;
text-align: center;
color: #FCFCFA;
}

#secondary div.module-calendar .module-content {
font-size: 75%;
padding-bottom: 0;
}

#secondary .module-typelist .module-header {
text-align: center;
}

#secondary .module-typelist .module-content {
text-align: center;
}

#secondary .module-typelist .module-content ul {
margin: 0;
padding: 0;
}

#secondary .module-typelist .module-content ul li {
list-style: none;
margin: .15em 0;
}

/*NAVIGATION TOP*/

.topnav {
margin: 0 10%;
text-align: left;
}

/*ENTRIES*/

div.entry {
background-color: #B1B7AC;
padding: 0;
width: 70%;
margin: 0 auto 2em auto;
border: 0;
}

div.entry > div.inner {
background-color: #FCFCFA;
padding: 0;
margin: 0 140px 0 0;
border: 0;
}

div.entry div.header {
letter-spacing: 1px;
padding: .5em .5em .5em .65em;
margin: 0 0;
background-color: #FCFCFA;
}

div.entry div.header a {
text-decoration: none;
}

div.entry h3.entry-title {
font-size: 150%;
padding: .15em 0;
margin: 0 0 0 0;
color: #ADB07B;
}

div.entry h3.entry-title a {
color: #ADB07B;
}

div.entry h3.entry-title a:hover {
color: #C5C88C;
}

div.entry span.datetime {
text-transform: uppercase;
padding: 0;
font-size: 75%;
color: #BFBFBF;
}

div.entry span.datetime a {
color: #BFBFBF;
}

div.entry span.access-filter img {
display: none;
}

div.entry span.restrictions img {
display: none;
}

div.entry-content {
margin: 0 0;
padding: .75em 1.5em 2em 1.5em;
text-align: justify;
min-height: 80px;
background-color: #FCFCFA;
font-size: 80%;
color: #444;
}

div.entry-content a {
color: #838F78;
}

div.entry-content a:hover {
color: #664A58;
}

div.entry div.userpic {
float: right;
clear: left;
margin: 0 -140px 0 0;
width: 140px;
text-align: center;
}

div.entry div.userpic img {
padding: 4px;
margin-top: -30px;
margin-bottom: 2px;
border: 1px solid #CAD1C5;
}

div.entry span.poster {
float: right;
clear: both;
text-align: center;
margin: 0 -139px 0 0;
font-size: 60%;
width: 138px;
color: #444;
}

div.entry span.poster a {
color: #FCFCFA;
font-weight: normal;
text-decoration: none;
}

div.entry span.poster img {
display: none;
}

div.entry div.metadata {
font-size: 80%;
margin: 0 0;
padding: 0 0 0 1.5em;
color: #BFBFBF;
background-color: #FCFCFA;
}

div.entry div.metadata span.metadata-item {
color: #B1B7AC;
}

div.entry div.metadata ul, div.entry div.metadata ul li {
margin-bottom: 0;
}

div.entry div.footer {
margin: 0 0;
padding: 0 1em .75em 1.5em;
background-color: #FCFCFA;
}

div.entry div.footer div.tag {
color: #BFBFBF;
font-size: 80%;
margin: 0 0 0 0;
}

div.entry div.footer div.tag ul li a {
color: #9E9599;
}

ul.entry-management-links {
margin: 0;
padding-top: .85em;
text-align: center;
}

ul.entry-interaction-links {
margin: 0;
text-align: center;
}

ul.entry-management-links a, ul.entry-management-links a:hover, ul.entry-management-links a:visited, ul.entry-interaction-links a, 
ul.entry-interaction-links a:hover, ul.entry-interaction-links a:visited {
color: #ADB07B;
}

/*COMMENTS*/

#comments {
width: 70%;
margin: 0 auto;
padding: 0;
}

div.comment-pages {
text-align: center;
}

div.comment {
background-color: #FCFCFA;
border-bottom: .25em #B1B7AC solid;
margin: 0;
padding: 0;
}

.comment-wrapper-even div.comment {
border-bottom: .25em #8D8589 solid;
}

div.comment div.header {
margin: 0;
font-size: 80%;
background-color: #B1B7AC;
}

.comment-wrapper-even div.comment div.header {
background-color: #8D8589;
color: #FCFCFA;
}

div.comment div.comment-title {
background-color: #DCF0C2;
}

div.comment div.comment-title h4 a {
padding: .25em .25em 0 .25em;
text-transform: uppercase;
text-decoration: none;
font-weight: normal;
font-size: 110%;
color: #444;
}

div.comment span.datetime {
padding: .25em .25em 0 .25em;
margin: 0;
}

div.comment span.poster {
font-size: 80%;
}

div.comment span.poster-ip {
font-size: 80%;
color: #8D8589;
}

div.comment div.contents {
padding: 0 0 0 .25em;
margin: 0;
}

div.comment div.userpic {
float: right;
width: 76px;
text-align: center;
margin: .5em;
}

div.comment div.userpic img {
width: 70px;
height: 70px;
border: 3px #EAE7E8 solid;
}

div.comment div.comment-content {
margin: 0;
padding: 1em 0 .5em .75em;
font-size: 95%;
}

div.comment div.footer {
margin: 0;
clear: both;
padding: .5em .25em;
text-align: right;
font-size: 80%;
text-transform: uppercase;
}

ul.comment-management-links {
margin: 0;
text-align: center;
}

ul.comment-interaction-links {
margin: 0;
text-align: center;
}

ul.comment-management-links a, ul.comment-management-links a:hover, ul.comment-management-links a:visited, ul.comment-interaction-links a, 
ul.comment-interaction-links a:hover, ul.comment-interaction-links a:visited {
color: #ADB07B;
}

/*REPLY PAGE*/

.page-reply .comment {
width: 70%;
margin: 0 auto 1em auto;
border: 0;
background-color: #FCFCFA;
}

#qrform table { 
border: 0 !important;
}

table.talkform {
width: 70%;
padding: 0 2em;
border-top: .75em solid #B1B7AC;
border-bottom: .35em solid #B1B7AC;  
background-color: #FCFCFA; 
margin: 0 auto;
}

input, select, textarea {
border: 1px solid #B1B7AC;
background-color: #FCFCFA;
}

/*NAVIGATION BOTTOM*/

.bottomcomment {
padding-bottom: 1em;
text-align: center;
}

.bottomcomment ul {
padding-bottom: .75em;
}

.bottomcomment ul a, .bottomcomment ul a:visited {
color: #8D8589;
}

.bottomnav {
margin: 0 10% 0 0;
padding-bottom: .4em;
text-align: right;
}

/*BOTTOM MODULES*/

#tertiary .module {
float: right;
width: 24%;
margin: 0 0 1em 0;
}

#tertiary .module .module-content ul {
list-style-position: inside;
}

#tertiary .module-tags_cloud {
width: 48%;
}

#tertiary .module-tags_cloud .module-content {
text-align: justify;
margin: 0;
padding: 0 1.5em;
}

#tertiary .module-tags_cloud .module-content ul {
margin: 0;
padding: 0 1.5em 0 0;
}

#tertiary .module-tags_cloud .manage-tags-link {
text-align: right;
text-transform: uppercase;
margin-bottom: .75em;
}

#tertiary .module-active .module-content ul.module-list {
list-style-type: none;
list-style-position: outside;
}

#tertiary .module-time, #tertiary .module-powered, #tertiary .module-syndicate {
clear: both;
margin: 0 0 1em 0;
width: 95%;
}

#tertiary .module-syndicate .module-header {
display: none;
}

#tertiary .module-time .module-content, #tertiary .module-powered .module-content, #tertiary .module-syndicate .module-content {
text-align: right;
text-transform: uppercase;
font-size: 90%;
}

/*FOOTER*/

#footer {
text-align: center;
font-size: 80%;
text-transform: uppercase;
background-color: #8D8589;
}

#footer a {
color: #EAE7E8;
}

/*ARCHIVE*/

.page-archive div.month {
margin: .25em auto 1.75em auto;
padding: 0;
width: 70%;
float: none;
margin: .25em auto 1.75em auto;
background-color: #FCFCFA;
}

.page-archive div.month h3 {
background-color: #8D8589;
color: #FCFCFA;
padding: 0 .5em;
}

.page-archive div.month table { 
width: 70%; 
margin: 1em auto;
}

.page-archive div.month td {
border: 1px #CAD1C5 solid;
}

.page-archive div.month th {
text-align: center; 
margin: 0 2px; 
font-weight: normal;
border: 1px #CAD1C5 solid; 
}

.page-archive div.month td.day-has-entries p { 
padding: 0 0 0 5px; 
margin: 0; 
display: inline; 
}

.page-archive div.month div.footer {
text-align: right;
padding: .5em;
}

.page-month #archive-month { 
background-color: #FCFCFA;
width: 70%;
margin: 0 auto;
clear: both;
}

.page-month #archive-month > .inner {
margin: .5em 2em;
padding-top: .5em;
}

.page-month dt a {
font-size: 110%;
color: #ADB07B;
}

.page-month dd {
border-bottom: 1px dotted #EAE7E8;
margin-bottom: .75em;
}

.page-month .month div.tag {
margin-left: .75em;
font-size: 85%;
}

.page-day h3.day-date {
text-align: center;
}

/*TAGS PAGE*/

.page-tags .tags-container {
margin: 1em auto;
width: 70%;
padding: 0;
background-color: #FCFCFA;
}

.page-tags .tags-container h2 { 
padding: 0 .5em; 
margin: 0;
background-color: #B1B7AC;
color: #FCFCFA;
}

.page-tags .ljtaglist ul {
list-position: inside;
}

.page-tags .manage-tags-link {
text-align: right;
padding: 0 .5em .5em .5em;
}

/*LOCKED AND RESTRICTED ENTRIES*/

img[src*='locked.png'], img[src*='filtered.png'], img[src*='private.png'], img[src*='icon_18.png'], img[src*='icon_nsfw.png'] {
width: 0;
height: 0;
padding: 0 5px 18px 0;
}

.security-protected .entry .entry-title, img[src*='locked.png']{
padding-left: 20px;
background: transparent url('http://i330.photobucket.com/albums/l418/Droomers/31Lock.png') no-repeat center left;
}

.security-custom .entry .entry-title, img[src*='filtered.png'] {
padding-left: 20px;
background: transparent url('http://i330.photobucket.com/albums/l418/Droomers/23SecurityFiltered.png') no-repeat center left;
}

.security-private .entry .entry-title, img[src*='private.png'] {
padding-left: 20px;
background: transparent url('http://i330.photobucket.com/albums/l418/Droomers/24SecurityPrivate.png') no-repeat center left;
}

.restrictions-18 .entry .entry-title a, img[src*='icon_18.png'] {
padding-left: 20px;
background: transparent url('http://i330.photobucket.com/albums/l418/Droomers/25Restricted18.png') no-repeat center left;
}

.restrictions-NSFW .entry .entry-title a, img[src*='icon_nsfw.png'] {
padding-left: 20px;
background: transparent url('http://i330.photobucket.com/albums/l418/Droomers/26RestrictedNSFW.png') no-repeat center left;
}

/*ICONS*/

img[src*='edit.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/01EditEntry.png') no-repeat;
}

img[src*='tag_edit.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/02EditTags.png') no-repeat;
}

img[src*='memories_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/03AddToMemories.png') no-repeat;
}

img[src*='track.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/04TrackThis.png') no-repeat;
}

img[src*='tellafriend.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/05Share.png') no-repeat;
}

img[src*='next.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/06Next.png') no-repeat;
}

img[src*='previous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/07Previous.png') no-repeat;
}

img[src*='anonymous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/30Anonymous.png') no-repeat;
}

img[src*='delete.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/24SecurityPrivate.png') no-repeat;
}

img[src*='screen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/screen.png') no-repeat;
}

img[src*='unscreen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/unscreen.png') no-repeat; 
}

img[src*='freeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/freeze.png') no-repeat;
}

img[src*='unfreeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/unfreeze.png') no-repeat;
}

img[src*='subscription_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/13SubscribtionAdd.png') no-repeat; 
}

img[src*='subscription_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/14SubscriptionRemove.png') no-repeat;
}

img[src*='access_grant.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/15AccessGrant.png') no-repeat;
}

img[src*='access_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/16AccessRemove.png') no-repeat; 
}

img[src*='community_join.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/17JoinCommunity.png') no-repeat;
}

img[src*='community_leave.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/18LeaveCommunity.png') no-repeat; 
}

img[src*='post.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/19Post.png') no-repeat; 
}

img[src*='message.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/20Message.png') no-repeat;
}

img[src*='sticky_entry.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/21Sticky.png') no-repeat; 
}

.ljuser img {
width: 0;
height: 0;
background-image: none;
padding: 0 0 16px 18px;
}

img[src*='user.png'] { 
width: 0; height: 0; 
padding: 0 0 16px 18px; 
background: url('http://i330.photobucket.com/albums/l418/Droomers/32User.png') no-repeat; 
vertical-align: middle !important;
}

img[src*='user.png'], img[src*='lj-userinfo.gif'], img[src*='userinfo.gif'], img[src*='user_other.png'], img[src*='user_staff.png'], img[src*='.ico'] { 
background: url('http://i330.photobucket.com/albums/l418/Droomers/32User.png') no-repeat bottom left;
padding: 0 0 16px 18px;
}

img[src*='community.png'], img[src*='community.gif'], img[src*='comm_staff.png'] { 
background: url('http://i330.photobucket.com/albums/l418/Droomers/28Community.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;  
}

img[src*='openid.png'] {
background: url('http://i330.photobucket.com/albums/l418/Droomers/29OpenID.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;
}

/*CONTEXTUAL POP-UP*/

div.ContextualPopup div.Inner { 
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
background: #FCFCFA; 
border: 3px double #B1B7AC; 
color: #8D8589; 
padding: 3px; 
text-transform: lowercase;
}

div.ContextualPopup .Content { 
padding: 1em;
}

div.ContextualPopup .Relation { 
margin-bottom: .8em;
}

div.ContextualPopup .Userpic { 
float: right; 
width: 50px; height: 50px; 
padding: 4px; 
border: 1px solid #CAD1C5; 
margin-right: .5em;
}

div.ContextualPopup img { 
border: 0;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { 
color: #ADB07B; 
font-weight: normal;
}

/*CONTROL STRIP*/

#lj_controlstrip {
background-color: #9E9599;
background-image: none;
border-bottom: 1px dotted #B1B7AC;
}

#lj_controlstrip a {
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #DCF0C2;
}

#lj_controlstrip_statustext, #lj_controlstrip_actionlinks, #lj_controlstrip_search {
font-family: 'Lucida Grande', Helvetica, sans-serif !important;
color: #EAE7E8 !important;
}

#lj_controlstrip_login input, #lj_controlstrip_login input#xc_user, #lj_controlstrip_login input#xc_password,
#lj_controlstrip_user input, #lj_controlstrip_search select, #lj_controlstrip_search input, 
#lj_controlstrip_search input#search, #lj_controlstrip_actionlinks select, #lj_controlstrip_actionlinks input {
padding: 0px 2px;
text-transform: uppercase;
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #8D8589;
border: 1px solid #8D8589;
background-color: #EAE7E8;
}

#lj_controlstrip_login input:hover, #lj_controlstrip_user input:hover, #lj_controlstrip_search input:hover, 
#lj_controlstrip_actionlinks input:hover {
color: #EAE7E8;
border: 1px solid #EAE7E8;
background-color: #8D8589;
}

#lj_controlstrip_search input#search {
text-transform: none;
}

.entry img { max-width: 600px; !important;
}

span.poster { margin: 15px 0; }

.metadata { margin: 20px 0 0 0; }
div.metadata ul { padding: 0; margin: 0; }
div.metadata ul li { list-style: none; padding: 0; margin: 0; text-transform: lowercase; font-size: 7pt;}

span.metadata-label-location, span.metadata-label-mood, span.metadata-label-music { display: none; }
span.metadata-item-location { background: url('http://i330.photobucket.com/albums/l418/Droomers/33Home.png') no-repeat; padding: 16px 0 0 16px; margin: 0; display: inline; }
span.metadata-item-music { background: url('http://i330.photobucket.com/albums/l418/Droomers/34Music.png') no-repeat; padding: 16px 0 0 16px; margin: 0; display: inline; }
span.metadata-item-mood { background: url('http://i330.photobucket.com/albums/l418/Droomers/35Smiley.png') no-repeat; padding: 16px 0 0 16px; margin: 0; display: inline; }

span.tag-text { display: none; }
div.tag ul { background: url('http://i330.photobucket.com/albums/l418/Droomers/36Tag.png') no-repeat; padding: 16px 0 0 16px; margin: 0; display: inline; }
div.tag ul li { display: inline; list-style: none; font-weight: normal; font-family: Lucida Grande; font-size: 7pt; padding: 0; margin: 0 5px 0 0; }

ETA: SOLVED! :)

Tags:

!needs tag

thomasneo

Hi.

For the past few days, I've been trying to add a background image via CSS to #header-primary with limited success—the code works all right on Firefox but not on Chrome. Edit: You can now see the code live on my this account.

~~How can I adjust the code so that it will look both the same on Firefox and Chrome?~~ Solved. Thanks to

carene_waterman

Working Code:

#header-primary { background-image: url(http://z5.ifrm.com/30174/148/0/f5177590/Test-Background.gif); background-repeat: no-repeat; background-size: 100% 100%; border-radius: 2em; margin-bottom: 1em; margin-right: 2em; } #header-secondary { margin-right: -17em; } #header-primary .inner { margin-left: 1em; margin-top: .5em; }

A smaller thing. Not sure if this is possible or not, but is there a way to put the "Top of Page" as an entry-management button on every entry (beside the Add Memory, Track This, . . . buttons)?

Thanks in advance to all who respond. :D

Current Mood: hopeful

Tags:

!needs tag

refno619012

Hi! It's me again.

This time I need help centering my layout (which was built using "Wet Sand by

rising for Line Up"). I've tried every trick I know and even went to Google, but nothing I've tried works. :\ Would anyone here know a solution?

Thanks in advance! :)

Tags:

turlough

For the first time I'm trying to adapt a native DW style (Heads Up) for a comm instead of working with a ported-from-LJ one. I've been sticking to custom CSS and so far I seem to have managed to change most of the things I wasn't happy with. There are a couple of things I seem to be completely unable to fix however.

They both concern ( entry headers… )

Current Mood: frustrated

Tags:

facetofcathy

I made a poll at my journal about using light on dark themes or styles, and while the results so far are intriguing, it needs more answers.

And in particular answers from people who use and like or need to use light on dark themes on sites like Dreamwidth.

For example, so far there's a nearly even split on the high contrast/low contrast question. I'd like to know if that holds up with more data. This is all totally unscientific, but designed to get some insight into the range of user preferences and needs.

Please come tick some boxes! And add to the discussion if you wish, all are welcome.

(Mods, perhaps a discussion tag if you think that's appropriate?)

Tags:

!needs tag

Profile

Dreamwidth style system discussion

April 2025

S	M	T	W	T	F	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Syndicate

Page Summary

Style Credit

Style: Radiant Aqua for Venture by onlyembers

Expand Cut Tags

No cut tags

Page generated May. 30th, 2025 12:13 pm

Dreamwidth style system discussion

Entries tagged with !needs tag

Floating Journal Guardian

Various questions for Librarian's Dream + Mobility

Poll options

CSS for the navigation control strip

Metadata and mini icons

Database / (1) Header Background Image, (2) "Top of Page"

NEED HELP WITH: centering a layout

Entry header problems (SOLVED for now)

Looking for participants in a poll about using light on dark themes or styles

Profile

April 2025

Links

Syndicate

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags