Complete Style

Custom Color Icons on the Friend Page ...

2009-08-25T08:53:32Z

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!

Modules Help!

2009-06-22T20:57:51Z

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?

s2completestyle @ 2009-04-08T13:41:00

2009-04-08T18:41:41Z

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:

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

How to remove journal links in banner

2008-07-29T17:25:00Z

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

How to change a header image

2008-07-16T17:35:07Z

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!

Guidelines for designers

2008-07-16T00:41:59Z

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.

New themes will be released under the GPL, as per IJ policy.
: This means that you must be willing to release your design to be loaded, copied, or diced up for parts by pretty much the whole world. It does not mean that you will not receive credit for your design work. You will be explicitly credited as the designer via this community and any authorial identification you may include in your code (eg your name at the top of the style sheet). You are still the copyright holder; it's just that, under the GPL, you explicitly allow the copying and/or modification of your design code.
Make sure any images you use are legal.: This is a corollary of the first guideline. Make sure you have the right to use whatever background images you are using, and release them in a GPL design. The Open Clip Art Library and stock.xchng can both supply images on suitable licensing terms.
Make sure any images you use are legal in a web template.: The thing is, most commercial stock photo sites will give you free use of any image you buy for a web page. The licensing for use in a web template is either hugely more expensive or else completely forbidden. Something like a journal style counts as a web template.
Make your layout legible down to 800x600px.: I don't ask anyone to optimize for that small a size anymore, but plenty of people are still stuck with screens of that resolution, so try to make sure that your layout doesn't break down when you take it down that small.
Try to stay away from set font sizes.: Along the same lines, the vast range of browser resolutions out there means that, for example, Arial 12pt will be huge on some screens and tiny on others. Do what you can to use proportional font sizing instead.
Make sure you can go up and down at least two font sizes without breaking your layout: Again, along the same lines, with different resolutions and different viewing preferences, come a lot of different size settings. Be sure you can toggle both up and down a few font sizes without anything breaking or overflowing. This can take a bit of ingenuity when you're using image backgrounds for headers and such, but it's worth it.
Make sure your layout is compatible with at least the most recent versions of IE, Firefox, Safari and Opera.: As browsers get more standards compliant, of course, this gets easier. I recommend also making it compatible with Linux browsers such as Konqueror and Galeon. This should not be difficult, if you design to, or even close to, W3C standards, and manage to be compatible with the above listed browsers. If you can make them compatible as far back as IE5 and Firefox 1, this is a really nice added bonus. I highly recommend Browsershots for layout testing.

Keeping all that in mind, go for it!

FAQ

2008-07-16T00:00:50Z

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.

Why can't I change the colors?: Complete Style is designed to be a CSS based style, like Bloggish/Style Contest or Expressive. This means that the themes come "as is". The colors and backgrounds can only be changed by adding custom CSS, and some familiarity with CSS is helpful if you want to try that. If you prefer a style that allows you to choose colors in the Custom Options via a color-picker box, you may prefer a journal style like Digital Multiplex or Flexible Squares.
What is CSS?: CSS is a cousin of HTML. It allows you to define how all the code bits on a page, like links and divs and tables and so on, should be displayed. Newcomers to CSS may find this page helpful.
Can I make a new layout for Complete Style?: Please do! This style is made to lend itself to as many sorts of layouts as possible, and new themes are always welcome. If you want to offer your layout for individuals to load via the Custom Stylesheets option, feel free to post it here. Complete Style has a sidebar module for giving designer credit, so be sure to specify what name you wish to be credited under. If you wish to offer your layout to be adopted as a new official theme for the style, that's great too! Be sure to read the guidelines for designers.
What is the "Layout Credit" sidebar module?: That module was included so that, if you are using a layout that is not one of the official themes, you can give appropriate credit to the designer right on the journal. If it it is not filled in via Custom Options, it will show the name of the theme designer for whatever theme you have set.
I selected Travel/Modish and there aren't any journal links in the header. Where did they go?: All themes have nav links (Friends, Archive, etc.) available as a sidebar module. Some themes are specifically designed to work with that sidebar module and do not show those links in the header. To get those links in your sidebar, go to Customize Journal > Custom Options > Sidebars and make sure that one of your modules is set to "Nav Links".
Why does the header of a tags page look so weird? There are plus signs in it!: Yes, there are, and there's no way to get rid of them. That header isn't generated natively anywhere in the S2 core, so it has to be finagled out of the URL for the page's RSS. Because it is a URL, spaces are represented with specific characters, in this case a +. It's only thanks to Afuna and Camomiletea that we have a header at all. If it gets too much on your nerves and you want to just get rid of it entirely, put #tagpage-header { display: none } in your Custom CSS.
Why is there a link to some other site in my sidebar profile?: That module shows a link to the website you have listed (if any) in your IJ account profile information, along with your userpic, your account name and your user name. All of these are set to display by default, but you can turn any or all of them off. You can select the contents of the profile module in the Sidebar section of the Custom Options tab in the Customize Journal area.

How to change link colors

2008-07-15T23:49:33Z

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.

How to add custom CSS

2008-07-15T17:30:26Z

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.

How to change the font

2008-07-15T17:10:26Z

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.

There's more than one of...

2008-07-15T17:06:00Z

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.