Complete Style

Hello! I'm trying to make a layout for a network-type journal that uses the custom friend color option heavily. I've narrowed down the css coding down to the .inner-entry-userpic where I can manipulate the icon on the friend's page, but even if I use 'background: transparent !important;', I can't seem to see my custom friend colors.

Is the custom colors option not compatible with Complete Style? If it is, am I using the wrong code bit to manipulate the transparency?

Thank you!

My journal: scotchbonnet. Layer: 87953 It is messy.

Okay, I decided to add the sidebar to the top and I'm losing it. I can't see how to make this work. This is as far as I could get.

1.How do I get the modules to stay up there and the entry to always stay below it.
2. which module is navigation to remove?
3. How to get customtext modules to show only when I add text in there?
4. Will Summary module go to the first line evar? :) it keeps staying on the second line.
5. Can I move syndicate module out, maybe layered on the header?
6. I have a small space after the summary module I can't fixed, how do I fix that?

For this journal: Maybe add a update link in the quick links?

Tired of the ugly icons and graphics on InsaneJournal? I've made a script that overrides them all and makes InsaneJournal a whole lot prettier. Interested? Just follow these easy steps:

1. Install the Stylish extension (if you don't already have it) and restart your browser once it is completed.
   
2. Go to the script's userstyle page here.
   
3. Click the button that reads 'Load into Stylish' under 'Install options'.
   
4. When a box pops up, click 'Save'.
   
5. Enjoy!

All themes have journal links (Recent Entries, Friends, User Info, etc.) available in a sidebar module. Most also place them in the banner area. If you want to remove the version in the banner this is how you do it.

Place the following into your Custom CSS:

#nav-above, #nav-below { display: none; }

If you also want to have the links in a sidebar module instead, scroll up the Custom Options page a bit to where you select sidebar modules and make sure that one of the dropdowns is set to "Nav Links".

In some themes this will be easy, in others more difficult. Let's start with easy.

Let us say you are using the Basic Black and White theme, and just want to remove the black box around the journal title and put your own banner image in the header.

To remove the black box, and make the text black, you will need the paste the following code into your custom css:

#header-text { background-color: none;
border: none;
color: #000000; }
#header-text a { color: #000000; }

If you are using a dark image and want to leave the text white, just don't use the "color: #000000" lines.

Next you need to add your image. First, check to see what size your image is, because you're going to need that. Background images do not take up any "space" by themselves, so you have to specifically tell the container to be as tall as the background image is. Let us say your banner is 300px tall.

You also need to know whether your image should repeat. Is it a big banner you just want to appear once, or is it a smaller image you want to tile? Or is it something you want to repeat horizontally in a strip? Let us say it is a big banner that should not repeat itself at all.

So the next code to paste in will look like this:

#header { background-image: url(http://imagelocation.com/imagename.jpg);
background-repeat: no-repeat;
height: 300px; }

If it had been something you wanted to repeat across, then instead of "no-repeat" you would need to put in "repeat-x". If it's something you want to repeat up and down, you put in "repeat-y".

If you have a more complex set of background images, something you want to layer, there are four header divs available for the purpose. They are, in order from outer to inner:

#header
#header-inner
#banner
#banner-inner

The specific rules you need to alter will quite likely vary a bit from one theme to another, so if you're having trouble the best thing to do is look at the stylesheet of the theme you're using and see whether, for example, you need the change the background of #header-text or the background-color. If you're still stuck, post asking for help!

These are the guidelines for layouts to be included as officially supported themes. Designers of layouts offered for individual users to load as custom stylesheets need not feel bound by them.

( Design Guidelines )

Keeping all that in mind, go for it!

This is the FAQ for Complete Style. If you think there is a question that should be answered here and isn't, please comment on this entry.

( FAQ )

How much work this will be depends on the theme. With some themes, it will be enough to add the following to your custom css:

a { color: #000099; }
a:visited { color: #009900; }

inserting the color code for whatever color you want your links to be. If you are unfamiliar with hexidecimal color codes, try using a colorpicker to choose them.

Some themes will have different link colors specific to the header or sidebar or main column, however, and those will have to be included separately. If the above code does not do what you want it, the next step is to try:

#beta a,
#gamma a { color: #000099; }
#beta a:visited,
#gamma a:visited { color: #009900; }

for the sidebar, or

#alpha a { color: #000099; }
#alpha a:visited { color: #009900; }

for the main column, or

.entry a { color: #000099; }
.entry a:visited { color: #009900; }

for entries specifically. In fact, if you want to change the link colors only on your entries, and don't mind the sidebar or header colors, your best option is to use the .entry version first thing.

If that still doesn't make your link colors change, you will need to take a look at the style sheet for that theme and track down the places where #anything a { color: #whatever; } is defined. The #anything string will need to be copied exactly into your custom css, with the color changed to the one you want.

A lot of the how-to posts will mention "add this to your custom css". Here is how you do that, for those who have never done it before.

Open a site page, such as your User Info. From the Journal section of the menu, select Customize Journal.

You should now have a page with a tabbed box on it. Click on Custom Options, the third tab over.

Scroll all the way down to the bottom, past all the other option-setting dropdowns and text boxes. The last box will be the Custom Stylesheet.

Paste whatever code you are adding into this box and hit the Save button below.

If you are adding a whole style sheet, to define an entire layout, be sure that you have selected the theme (None), in the Look and Feel tab, unless otherwise directed by the designer. This will remove any other theme style sheets that might interfere.

In the starter set of themes, most of the font is defined in the body tag. To change the font, add the following code to the Custom CSS window:

body { font-family: Verdana; }

Using whatever font you most prefer, of course.

The Complete Style code has a few areas where things repeat. If you look at an unstyled page, you may note that there are two navigation link sets in the header, one at the top and one at the bottom. There is also, of course, the version available as a sidebar module. There are three places the user icon shows up, above the entry header, inside the entry header, and inside the entry body.

This is to make as many layout variations as possible possible without having to make the css positioning too circuitous. The navigation links and the user icon seem to be the two page elements moved around the most, so those were placed in all the most common locations.

To get rid of any versions you aren't going to use, just give them a display:none.