style_system | Entries tagged with page:header footer or background image

Hi everyone!

I made another layout for a community I recently created. The problem I have is not bieng able to relocate the previous and next links to where I want them to go. It doesn't help that the previous and next links overlap by 1px over the navigation/menu bar. I have no idea how to move them.

Here is the entire layout's css:

/* 
base style: blanket
layout name: windshield
6thirty.dreamwidth.org
*/
body { color: #010101; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 12pt; text-align: left; line-height: normal;
background: #010101 url('http://i.imgur.com/ZWtaVob.png') repeat; background-position: left bottom; background-attachment: fixed;
margin: 0; padding: 0; }

a, a:link, a:visited  {  color: #A3D0C8; text-decoration: none;
-webkit-transition: color 1s ease-in;
-moz-transition: color 1s ease-in; 
-o-transition: color 1s ease-in; }

a:hover, a:active:hover { color: #76B0A1; }

q { font-style: italic; }

b {}

strong {}

i {}

em {}

blockquote { color: #010101; font-family: Helvetica, Tahoma, sans-serif; font-size: 8pt; 
border-left: 6px solid #768fa3; border-right: 6px solid #768fa3; border-radius: 25px;
float: center; margin: 20px 20px 20px 20px; padding: 10px; width: 75%;
-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms; 
text-shadow: rgba(0,0,0,.2) 2px 6px 5px,rgba(255,255,255,.4) 0 -4px 30px; }

blockquote:hover { border-color: #dbe3ee; font-style: italic; 
padding-left:50px; }

input, textarea { color: #888888; line-height: 0px;
background-color: #ffffff; border: solid 1px #eeeeee;
padding: 5px; }

img { opacity: 0.1; }

img:hover { opacity: 1; }

#canvas { text-align: justify;
margin: 0 auto 3em; padding: 0; }

#content { margin: 0; padding: 0; }

#primary { margin: 0 auto; adding: 0; z-index: 0; }

/* contextual pop-up */
.contextualpopup { color: #010101; font-family: Helvetica, Tahoma, sans-serif;
background: #ffffff url('') no-repeat; background-position: left top; background-attachment: scroll;
margin: 0; padding: 0; }

.contextualpopup div.inner a, .contextualpopup div.inner a:link, .contextualpopup div.inner a:visited { color: #06273A; text-decoration: none;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

.contextualpopup div.inner a:active .contextualpopup a:hover { -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

.contextualpopup a, .contextualpopup a:link, .contextualpopup a:visited { color: #768fa3; }

.contextualpopup a:hover, .contextualpopup a:active { color: #dbe3ee; }

.contextualpopup .userpic { margin: .5em; padding: 0; }
    
.has-userpic .entry .userpic, .has-userpic .comment .userpic { float: right; }

.has-userpic .entry .header { margin-right: 135px; }

.has-userpic .comment .header { margin-right: 135px; }

/* control strip */
#lj_controlstrip { color: #010101; text-align: left; font-family: Helvetica, Tahoma, sans-serif; text-decoration: none;
background-color: #ffffff; background-image: none; 
opacity: 0.1; position: fixed; }

#lj_controlstrip:hover { opacity: 1;-webkit-transition: opacity 1s linear; }

#lj_controlstrip td { color: #010101; border-bottom: 1px solid #ffffff; }

#lj_controlstrip_statustext { color: #010101; }

#lj_controlstrip a, #lj_controlstrip a:link, #lj_controlstrip a:visited  { color: #76B0A1; }

#lj_controlstrip a:hover, #lj_controlstrip a:active:hover { color: #A3D0C8; }

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic { color: #010101;
border-right: 1px solid #ffffff; }

#lj_controlstrip_login td { border-bottom: 0; }

#lj_controlstrip td td { border-bottom: 0; }

/* header, footer */
#header { background-color: #ffffff;
margin: 0 auto 2em; display: none; }

#header>.inner { border-left: 20px solid #f2ebd7;
padding: 4em 2em; }

@media only screen and (min-width: 40em) { #primary, #header, #secondary, .page-top { width: 60%; }

#footer { clear: both; display: block; }

.page-top { text-align: right; text-transform: uppercase;
margin: 0 auto; display: none; }

.navigation { text-align: left; text-transform: uppercase; }

li.page-back, li.page-forward { font-size: 10pt; 
background: #ffffff;
display: block; margin: 0; padding: 25px; float: right; opacity: 0.1; }

li.page-back:hover, li.page-forward:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

li.page-back { display: block; width: 355px; left: 25px; }

li.page-forward { display: block;width: 355px; right: 25px; }

li.page-separator { display: none; }

.navigation ul { display: inline; margin: 0 0 150px 0; padding: 0; }

.navigation li { display: inline; }

/* header */
#header h1#title { color: #aaaaaa; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1.25em; font-weight: normal; text-transform: uppercase; letter-spacing: 0;
margin: 0; padding: 0; }

#header h2#subtitle { color: #aaaaaa; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px;
margin: 0; padding: 0; }

#header h2#pagetitle { color: #c8c8c8; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1em; font-weight: normal; text-transform: uppercase; letter-spacing: 1px;
margin: 1em 0 0; padding: 0; }

/* navigation */
.module-navlinks { color: #000000;
background-color: #ffffff;
bottom: 0; margin: 0 auto; padding: .75em; position: fixed; width: 100%; z-index: 100; opacity: 0.1; }

.module-navlinks:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.module-navlinks a, .module-navlinks a:link, .module-navlinks a:visited { color: #76B0A1; text-decoration: none;
-webkit-transition: color 1s ease-in;
-moz-transition: color 1s ease-in;
-o-transition: color 1s ease-in; }

.module-navlinks a:hover, .module-navlinks a:active { color: #A3D0C8 }

.module-navlinks ul.module-list { letter-spacing: -0.5px; text-transform: none;
display: inline; margin: 0 0 0 2em; padding: 0; }

.module-navlinks ul.module-list li { display: inline; margin: 0 1em 0 0; padding: 0 .5em 0 0; }

/* modules */
#secondary { color: #888888;
background-color: #ffffff;
margin: 0 auto; padding: 0; z-index: 0; display: none; }

#secondary>.inner { border-left: 20px solid #f2ebd7;
padding: 4em 2em; }

#secondary .module { float: left; margin: 2em 1em; }

#secondary .module-header, #secondary .module-header a { color: #099aaf; }

#secondary .module-header { font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; }

#secondary .separator-after { clear: both; }

#secondary a, #secondary a:link, #secondary a:visited  { text-decoration: none; }

#secondary a:hover, #secondary a:active {  }

.module-tags_cloud { border-bottom: 1px solid #eeeeee; border-top: 1px solid #eeeeee;
float: none; margin: 3em 0; width: 100%; }

.module-tags_cloud .module-content { padding: 0 3em 1em; }

.module-tags_cloud li, .tags_cloud li { display: inline; }

#secondary .module-content { text-align: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; }

#secondary .module-content ul { list-style: outside; margin-left: 1em; padding-left: 0; }

#secondary .module-content li { margin: .5em 0; }

ul.userlite-interaction-links.icon-links { margin-left: 0; padding-left: 0; }

ul.userlite-interaction-links.icon-links li { display: inline; padding: 0 .20em; }

.module-calendar td a { display: block; padding: 2px; }

.module-credit .category-title { font-weight: bold;
margin-right: .5em; }

.module-search .search-form { margin: .2em auto; }

.module-search .search-box { max-width: 100%; margin: .2em; }

/* entry */
.entry { color: #010101; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 150px 0 150px 0; padding: 25px; opacity: 0.1; }

.entry:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.entry-content { margin: 1em 0 0; }

.entry a, .entry a:link, .entry a:visited { color: #76B0A1; text-decoration: none;
 -webkit-transition: color 1s ease-in;
 -moz-transition: color 1s ease-in;
 -o-transition: color 1s ease-in; }

.entry a:hover, .entry a:active { color: #A3D0C8 }

.entry img { opacity: 0.1; }

.entry img:hover { opacity: 1;-webkit-transition: opacity 1s linear; }

.header { margin: 0 0 1em; padding: 0; }

h3.entry-title { color: #010101; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 20pt; font-weight: normal; letter-spacing: -0px; text-transform: uppercase;
margin: 0; padding: 0; }

h3.entry-title a, h3.entry-title a:link, h3.entry-title a:visited { color: #76B0A1; }

h3.entry-title a:hover, h3.entry-title a:active { color: #A3D0C8; }

.no-subject .entry .entry-title { background: none; }

.datetime { color: #010101; font-size: 9pt; font-weight: normal; letter-spacing: 1px; text-transform: uppercase;
padding: 0; }

.datetime a, .datetime a:link, .datetime a:visited { color: #76B0A1; }

.datetime a:hover, .datetime a:active { color: #A3D0C8; }

.entry .userpic img { border-top: 10px solid #76B0A1; border-bottom: 10px solid #76B0A1; border-left: 10px solid #A3D0C8; border-right: 10px solid #A3D0C8;
opacity: 0.1; }

.entry .userpic img:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.poster { color: #010101; font-size: 10pt; font-weight: normal; letter-spacing: 1px; text-transform: uppercase;
padding: 0; }

.poster a, .poster a:link, .poster a:visited { color: #76B0A1; }

.poster a:hover, .poster a:active { color: #A3D0C8; }

.page-recent .entry-poster { display: none !important; }

.page-entry .entry-poster { display: none !important; }

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before { content: ""; display: block; overflow: hidden; width: 10em; }
.comment-content { border-top: 1px transparent solid; } /* for firefox */

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li, .comment-content li { list-style-position: inside; }

/* To constrain the width and prevent layout breaking */
.entry-content img, .comment-content img { max-width: 100%; height: auto; }

@media only screen and (min-width: 64em) { .entry-content img, .comment-content img { max-width: none; } }

.metadata { margin: 2em 0 0; }

.metadata.top-metadata { margin: 1em 0 2em; }

.metadata ul { list-style: none; margin: 0; padding: 0; }

.metadata ul li { color: #c8c8c8; font-size: .9em; font-weight: normal; letter-spacing: 0; text-transform: lowercase;
padding: 0; }

.metadata-label-location, .metadata-label-mood, .metadata-label-music { display: none; }

.metadata-item-location, .metadata-item-mood, .metadata-item-music { padding: 0 0 0 1.3em; }

.tag-text { display: none; }

.tag ul { display: inline; margin: 0; padding: 0 0 0 1.3em; }

.tag ul li { color: #c8c8c8; font-size: .9em; font-weight: normal; letter-spacing: 0; text-transform: lowercase;
display: inline; padding: 0; }

ul.entry-management-links { margin: 2em 0 0; padding: 0; }

ul.entry-management-links li { color: #c8c8c8; font-size: .9em; letter-spacing: 0; text-transform: lowercase;
display: inline; padding: 0 5px 0 0; }

ul.entry-interaction-links { text-align: center;
border-bottom: 1px solid #eeeeee;
margin: 1em 0 0; padding: 0 0 .5em; }

ul.entry-interaction-links li { color: #c8c8c8; font-size: .9em; font-weight: normal; letter-spacing: 0; text-transform: uppercase;
display: inline; padding: 0 5px 0 0; }

/* comments */
.comment-wrapper { margin: 2em 0; padding: 0; min-width: 15em; }

.comment { color: #010101; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 0 0 150px 0; padding: 25px; opacity: 0.1; }

.comment:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.comment a, .comment a:link, .comment a:visited { color: #76B0A1; text-decoration: none;
 -webkit-transition: color 1s ease-in;
 -moz-transition: color 1s ease-in;
 -o-transition: color 1s ease-in; }

.comment a:hover, .comment a:active { color: #A3D0C8 }

.comment .userpic img { border-top: 10px solid #76B0A1; border-bottom: 10px solid #76B0A1; border-left: 10px solid #A3D0C8; border-right: 10px solid #A3D0C8;
opacity: 0.1; }

.poster-ip { font-size: 9pt; }

.comment .userpic img:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.comment img { opacity: 0.1; }

.comment img:hover { opacity: 1;-webkit-transition: opacity 1s linear; }

.comment .poster { color: #010101; font-size: 10pt; font-weight: normal; letter-spacing: 1px; text-transform: uppercase;
padding: 0; }

.comment .admin-poster { color: #010101;
background-color: #ffffff; }

.comment-title { font-size: 20px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; text-trasform: uppercase;
margin: 0; }

.no-subject .comment .comment-title { background: none; }

.comment-posted { font-weight: normal; }

hr.above-entry-interaction-links, hr.below-reply-container { display: none; }

textarea.textbox { width: 100% !important; }

.bottomcomment { color: #010101; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 0 auto 2em; padding: 25px; opacity: 0.1; }

.bottomcomment:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; }

.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0 !important; opacity: 0.1; }

/* archive */
li.active { color: ##010101; text-align: center; text-transform: uppercase;
display: none; }

.month { color: #888888;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 150px 0 150px 0; padding: 25px; opacity: 0.1; }

.month:hover { opacity: 1; }

.month h3 { color: #76B0A1; font-size: 20pt; font-weight: normal; letter-spacing: 1px; text-align: left; text-transform: uppercase;
margin: 0; padding: 0;}

.month th { color: #ffffff;  font-size: 8pt; font-weight: normal; text-align: center; text-transform: uppercase;
background-color: #76B0A1;
padding: 5px; }

.month table { border: 0;
margin: auto; width: 100%; }

.month caption { display: none; }

td.day { border: .1em solid #76B0A1;
padding: .5em; }

.month td.day-has-entries { color: #010101; background: #ffffff; font-weight: normal; text-align: left; }

.month td.day-has-entries p { font-size: 1.14em; font-weight: b; text-align: left; }

.month td.day-has-entries p a, .month td.day-has-entries p a:link, .month td.day-has-entries p a:visited { color: #76B0A1; }

.month td.day-has-entries p a:hover, .month td.day-has-entries p a:active { color: #A3D0C8; }

.month dl, .month dt, .month dd { margin: 0; padding: 0; }

/* tags */
.page-tags .tags-container { color: #010101; text-align: left; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 150px 0 150px 0; padding: 25px; opacity: 0.1; }

.page-tags .tags-container:hover { opacity: 1; }

.page-tags .tags-container a, .page-tags .tags-container a:link, .page-tags .tags-container a:visited { color: #76B0A1; }

.page-tags .tags-container a:hover, .page-tags .tags-container a:active { color: #A3D0C8; }

.page-tags .tags-container h2 { color: #76B0A1; font-size: 20pt; font-weight: normal; letter-spacing: 1px; text-align: left; text-transform: uppercase;
margin: 0; padding: 0; }

.page-tags .tags-container ul { list-style: none; margin: 1em; padding: 0; }

.page-tags .tags-container ul li { margin: 0 0 0 1em; padding: 0; }

/* icons */
.icons-container { color: ##010101;
background-color: #ffffff; border-left: 20px solid #f2ebd7;
margin: 0 auto 2em; padding: 4em 2em; }

.icons-container a, .icons-container a:link, .icons-container a:visited  { color: ; }

.icons-container a:hover, .icons-container a:active { color: ; }

.icons-container h2 { color: #099aaf; font-size: 1em; font-weight: normal; letter-spacing: 1px; text-align: right; text-transform: lowercase;
margin: 0; padding: 0; }
    
.sorting-options ul { text-align: right;
padding-left: 0; }

.sorting-options ul li { display: inline; }

.icons-container .icon { margin: 1em 0; }

.icon-image { float: left; clear: left; margin-bottom: .25em; min-width: 100px; padding-right: 1em; }

.icon-info { min-height: 100px; }

.icon-info span { font-weight: bold; }

.icon-info .default { text-decoration: underline; }

.icon-keywords ul { display: inline; margin: 0; padding: 0; }

.icon-keywords ul li { display: inline; padding: 0; }

.userpic { float: left; margin: 0 10px 10px 0; }

Tags:

promethia_tenk

Hello all,

I'm on a devious mission to ~~convert my friend to DW~~ make my friend happier with her DW by helping make her layout closer to her LJ one (she uses Compact over there). I've made my own journal into a testing lab with Librarian's Dream as my base. This community's archives have been deeply helpful, but I'm running up against the limits of my hunt-and-fiddle knowledge of CSS and I still need to get my laundry done today.

Here is a screen grab of where I am now.

Is anyone able to help me with:

( Read more... )

Thank you in advance for any insight you're able to provide!

Tags:

weber_dubois22

Hey, guys, I searched the transmorgified tag in hopes that I would find an answer but came across none, so here's my problem.

I'm using a transmorgified layout by

visualwit and I want to add a header image to it. However, every time I attempt to use the following codes:

.module-navlinks { top: 315px; }

#header { margin-top: 312px; }

#canvas {
background-image:url("URL HERE");
background-position: right top;
background-repeat:no-repeat;
}

#canvas {
background-image: url(URL HERE);
background-repeat: no-repeat;
nackground-position: top center;
padding-top: 350px;
}

It never appears, the layour remains the same. Does anyone have a override or workaround for this particular custom style sheet that will allow me to put a header at the top of the layout? I really don't want to go looking for another layout in an already small collection of choices.

Tags:

unicorn

Hey guys. On my journal right now I'm trying to change the color of the bar around the "top of the page" footer link - for some reason I can't get it off of the pale blue it's on now and (preferably) change it to a gray that matches the other navigation stuff.

Also, the other navigation links (recent entries, archive, reading, etc) are all left-aligned on their bar, and I can't figure out how to get them to center instead.

I'm using a tweaked version of this code, if that makes anything clearer. Thanks in advance for your help!

Tags:

goneahead

Hi,

Sorry, I'm here - again. I've finally gotten my latest layout close to what I want, but I can't get the footer (I am using canvas for the footer) and background image (I am using body for the repeating image) to mesh correctly. If you scroll to the bottom, you will see what I mean.

I think I got the footer positioned right, but I need to add a margin to the bottom of my repeating background image? I can't seem to find the right coding that will let me do that. Any help would be appreciated!

Tags:

alyndra

Hi, I've finally started messing around a bit with customizing my journal style, and I was wondering how I can remove the footer. I never use the link to Top of Page and it takes up a lot of space. I looked around this community but didn't see an answer, any help would be appreciated!

ETA: Solved. Thanks,

branchandroot!

Tags:

jewelfox

I'm trying to replace the funky circles in question with a different picture, preferably superimposed over the title banner the way that the circles are normally. The current testbed is the otherwise-blank

fursona community, which is being styled to emulate the best parts of

aliaspseudonym's Tumblr. I'm just running into two problems:

One, due to the complex way that the circles are coded into the layer (as referenced in this comment on this entry, I'm not even sure how to extract and replace them completely, at least not using CSS. This comment explains how to do a custom header image, and that seems to work, but we're not going for that style of header.

Two, even replacing the background-image URL in that CSS style doesn't actually replace the background image. Does it need to be a paid account for me to do that? I'm confused.

Any help would be appreciated, even if it involves going into S2 (I've done a little of that before).

Tags:

aryas_zehral

Hi,

I'm trying to get a header onto Brittle over at

slashing_jane. I tried it using the #canvas tag(?) but when it was centered it was out of alignment with the body and when I put it to the left I couldn't work out how to move it in until it lined up. Also I want a background image for the page but I'm not sure how to do both.

I know nothing about CSS so any help would be greatly appreciated.

Thanks,

Sayra.

Tags:

sharpiefan

(Ironic, I know, given the previous post!!)

I'm using Practicality for my personal journal, and have inserted a header banner using this code:

#canvas {
background-image: url(http://i26.photobucket.com/albums/c139/Sharpiefan/Sharpebanner1.jpg);
background-repeat: no-repeat;
background-position: top center;
padding-top: 250px;
}

I want to introduce a small margin (of about 10px) at the top and bottom of my banner, to give a bit of space between the banner and the nav bar, at the top, and the header box (or whatever it's called) underneath.

How can I do this? Or can't I?

Trying to increase the padding number to 270 just moves the header box down, without shifting the banner itself down as well.

Tags:

sharpiefan

Hi there! I've recently switched to Practicality and have again encountered Dreamwidth's love of putting text over a header banner, as shown here, top right:

(click the thumbnail for a bigger view).

I'm not fantastic with HTML and CSS, but I know it's there somewhere, where I can put the header banner as a background image and move everything down, but I can't remember where to find that bit of code or how to alter it.

This isn't just an issue with Practicality, it occurs in every DW layout I've used: the Customize area allow for a link to a banner, but the text in that box won't move down, despite the user filling in the height of the banner, so the end result is a clash of text and banner that is frankly ugly. Would it be possible for someone to look into this and change the behaviour of text in the topbox? Or is that too big an ask, as it affects pretty much all DW layouts? I wouldn't know where to post such a suggestion, myself, and as I've said, I know next to nothing about coding.

Thanks for your help!

Current Mood: annoyed

Tags:

gone_fishing

Apologies if this has been asked here before, I looked through the community and didn't see it.

I have a small-ish image that I would like to add to the footer of my journal. I am aware that custom text supports HTML for images, however, I am already using the custom text space for an image. So, can someone provide me with the CSS to plug in to put the image URL in the footer? My current layout is Brittle, if it matters. Thanks! ^__^

Tags:

page:header footer or background image

faevii

I'm trying to create a layout by adding custom CSS to the Tabula Rasa style.

Does anybody happen to know which element I need to remove the margin from in order to get rid of the gap between the navigation strip and the header? I've tried everything I could think of already ...

Tags:

lilacsinrain

I have tried 5 different themes, but when I try to change the background image, it only shows the default color of that theme. I can change the header to the image I want, but nothing else. I haven't found a way to change the color to transparent, and need idiot-proof instructions for that. I tried 6 different tutorials, but the only advanced code I'm seeing is for the specific color code, not the entire layout code. Any help would be so appreciated, thanks.

Tags:

mayfly

If you go to my DW page, you can see there is a black background image. Essentially, I want that to show, and I want to move the left green module down further. I added some padding to get the content further down, but I'm not sure how to actually just get the green module to *move*.

The red is just there for testing. Although, I would be trying to move the links over as well with padding.

This would be easily solved if I could figure out how to get the background image to overlay the css - but I think that's not possible.

*Edit* I've been able to move it because I found the page where we can actually edit the css easily (the S2 page). I guess I'll be using that from now on instead of the main CSS box where we have to scroll back down every time we change one line of code!

Current Mood: annoyed

Tags:

elleth

I'm currently in the process of customizing my journal, but ran into a problem on the way, but I know the grand total of nothing about CSS and am not even certain what caused it.

I am using this bit of code for a fixed background image, and while the image itself is fixed, my page continues to scroll, with a bit of no background image between navigation strip and page, as well as to the right side of the screen, and this driving me nuts. Since, when I scroll to the side, it is the entry content that is moving, could the problem be caused by the entry module width, or is it a background image issue? And more importantly, can this be fixed?

(The layout looks fine in Google Chrome, the problem appeared in Firefox.)

SOLVED: Secondly, Brittle forces the icon size to 70px with a 5px border. Is there a way to remove the border and display the icons in their original size?

Thanks so much in advance!

Current Mood: determined

Tags:

ardath_rekha

I couldn't find any posts that referenced this so I thought I'd ask, because I have several layouts I'm attempting to port over that are broken without this.

A lot of my layouts make use of a fixed background behind the text, so the text scrolls over the image while the image stays still (usually coupled with transparent backgrounds on the modules and entries). I'm fine with using existing layouts -- and really don't have time to build a brand-new one from scratch anyway, argh, I have a ton of homework this semester -- but so far I've been unable to get any of them to not scroll the background image when I scrolled the page.

I found one layout in a community that had a fixed image but I haven't been able to modify the .css code its creator used to work with any of the other existing layouts (and the only thing I liked about her layout, sadly, was the fixed image).

Is there any reliable coding for fixed images? I have about half a dozen journals that can't get set up the way I want them without it, and I've tried everything in my (admittedly limited) arsenal of coding knowledge. I have one in particular that needs a non-tiling image fixed on the bottom-left of the page, and half the time I can't get it to stay still (and the other half of the time I can't get it to appear at all).

Hopefully someone has a solution for this. *crosses fingers!*

Edit: Here's the solution as worked out with the wonderful people who answered me:

I added the following to the .css (and made all other areas transparent):

#canvas { background-image: url(Image went here);
background-position: top-left;
background-attachment: fixed;
background-repeat: no-repeat; }

This worked perfectly. Users will need to make sure they set the page, module, header, and footer colors to transparent backgrounds and borders in order to achieve the effect, which can be seen here:

sarah_humphries. Thank you to everybody who helped me figure out how to apply this.

Tags:

page:header footer or background image

sally_maria

This is no doubt a real noob question, but I'm wondering if there is a way of making an image appear above the header box on my journal - so I get the image and then the title etc, in the box underneath it?

The header image option on the customize style page puts the picture into the header box, with the writing imposed on it, which is not what I want.

I have a paid account, and I'm quite used to using theme layers on LJ, if that's what it takes, but while I can edit other people's CSS a bit, I can't write it myself.

Thank you very much for any help you can give me.

Tags:

Profile

Dreamwidth style system discussion

June 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

6thirty - I want to know how to fix the previous 10 and next 10 links
promethia_tenk - Sidebar blocking banner and icon border issues
weber_dubois22 - Transmorgified Frustrations
unicorn - (no subject)
goneahead - Not sure how to make background and footer work together
alyndra - (no subject)
jewelfox - How to change "Funky Circles" background image?
aryas_zehral - Adding a header to Brittle
sharpiefan - Increasing header height
sharpiefan - Header banner/text issues
gone_fishing - Question re: footers and adding images
faevii - Quick Question
lilacsinrain - Changing a color background to transparent
mayfly - How to move a module in css, or get the background image to overlay it
elleth - Fixed background problem in Brittle
ardath_rekha - Fixed-image backgrounds - getting them to work? -- SOLVED
sally_maria - Putting an image above the header (SOLVED)

Style Credit

Style: Radiant Aqua for Venture by onlyembers

Expand Cut Tags

No cut tags

Page generated Jun. 21st, 2025 04:48 am

Dreamwidth style system discussion

Entries tagged with page:header footer or background image

I want to know how to fix the previous 10 and next 10 links

Sidebar blocking banner and icon border issues

Transmorgified Frustrations

(no subject)

Not sure how to make background and footer work together

(no subject)

How to change "Funky Circles" background image?

Adding a header to Brittle

Increasing header height

Header banner/text issues

Question re: footers and adding images

Quick Question

Changing a color background to transparent

How to move a module in css, or get the background image to overlay it

Fixed background problem in Brittle

Fixed-image backgrounds - getting them to work? -- SOLVED

Putting an image above the header (SOLVED)

Profile

June 2025

Links

Syndicate

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags