style_system | Entries tagged with !tips and resources

This is a Contrast Checker, which will tell you whether the contrast between your text and background is strong enough to be accessible for all users.

The site also describes other best practices (for example, always marking out links visually for people who can't see colour distinctions, or considering how your site will be experienced by screen readers)

I also found this checklist helpful - it's aimed at serious web-designers, but i've found tests like 'what does your site look like on desktop zoom' invaluable for improving my code projects

Tags:

!tips and resources

ex_awakened208

Edit: Fixed the theme layer code and the CSS code now!

Not sure how many people have noticed, but a while back I discovered that this code to make metadata and tags float around mood theme images wasn't working correctly. I didn't know where to begin to fix it at the time but I attempted to tinker with today and apparently fixed it!

This goes into the theme layer:

##===============================
##Moodtheme image on left by mmmag (http://style-system.dreamwidth.org/15122.html?thread=88594) + add tags to the metadata, thanks to Afuna's awesome (#dreamwidth)
##===============================

function Entry::print_metadata()
{
# ---------------------------------------------------- CUSTOMIZATION ---------------------------------------------------- #

var bool show_loc_link = false; # set to true to display the Google Map link

var bool show_groups_link = true; # set to true to display the custom friends group link

var bool show_music_link = true; # set to false to hide the last.fm link to the artist/song pages

var bool print_table = true; # set to false to display the mood icon inline with the mood text (default FS style)

var string alignment = "left"; # set the side of the mood icon (left or right of the currents) - only if printed in table

# set the order in which you want mood, music, location, tags, security and custom friends group to appear
# any metadata you want to hide journalwide, delete from this list
var string[] metaorder = ["mood", "music", "groups", "location" ];

# optional:
# put in the URLs to the pics you want to use instead of the currents' text labels
# if you leave it blank, the text label will be used instead
var string{} metapics = { "mood" => "IMAGE URL",
"music" => "IMAGE URL",
"location" => "IMAGE URL",
"groups" => "IMAGE URL" };

# ---------------------------------------------------- CUSTOMIZATION END ---------------------------------------------------- #

var string currents = """<div class="metadata">\n""";# here all metadata will be added to print currents container

# display mood and moodicon?
var bool display_mood = false;
foreach var string moodtest ($metaorder) {
if ($moodtest == "mood") { $display_mood = true; }
}

# table and mood icon
if (defined $.mood_icon and $display_mood and $print_table) {
$currents = ($alignment == "left") ?
$currents + """<table border="0"><tr><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td><td>""" :
$currents + """<table border="0"><tr><td>""";
}

# step through metadata in the order the user wants
foreach var string k ($metaorder) {

var string text; # the actual value of the metadata
var string label; # the label of the metadata as set in the wizard or set-statements

# handling all other metadata
if ($k != "" and $.metadata{$k} != "") {

# metadata value
$text = $.metadata{$k};

# label as image or text
$label = clean_url($metapics{$k}) != "" ? "<img src=\"$metapics{$k}\" title=\"" + lang_metadata_title($k) + "\" alt=\"" + lang_metadata_title($k) + "\" border=0>" : lang_metadata_title($k);

# strip location/music/groups link
if ((not ($show_loc_link) and ($k == "location"))
or (not ($show_music_link) and ($k == "music"))
or (not ($show_groups_link) and ($k == "groups"))) {
$text = striphtml($text);
}

# inline mood image
if (not ($print_table) and $k == "mood" and defined $.mood_icon) {
$text = """<img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" align="middle" />""" + $text;
}

} #end metadata

# skipping empty metadata

# assemble the individual currents
$currents = $currents + """<div><span class="metadata-label metadata-label-$k">$label</span> <span class="metadata-item metadata-item-$k">$text</span></div>""";
} # end foreach

println $currents;
$this->print_tags();

# table and mood icon
if ($display_mood and defined $.mood_icon and $print_table) {
$currents = ($alignment == "left") ?
"""</td></tr></table>""" :
"""</td><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td></tr></table>""";
}

# close currents container and print
"""</td></tr></table></div>\n""";
}

##===============================
## Removing the second tags box thanks to Afuna
##===============================
function Page::print_entry(Entry e)
"The meat of each new layout. Describes how each page will look. In nearly all cases, the logic and decision-making processes should come from pre-existing functions in core2, and should not get written here. If you limit the structure of the page to HTML, function calls, and attached CSS, then you will be able to pick up all of the enhancements and accessibility requirements managed by core2."
{
## For most styles, this will be overridden by FriendsPage::print_entry and such.
$e->print_wrapper_start();
"""<div class="header">\n""";
"""<div class="inner">\n""";
$e->print_subject();
$e->print_metatypes();
$e->print_time();
"""</div>\n""";
"""</div>\n""";
"""<div>\n""";
"""<div class="contents">\n""";
"""<div class="inner">\n""";
$e->print_userpic();
$e->print_poster();
if ($*entry_metadata_position == "top") { $e->print_metadata(); }
$e->print_text();
if ($*entry_metadata_position == "bottom") { $e->print_metadata(); }
"""</div>\n""";
"""</div>\n""";
"""</div>\n""";

"""<div class="footer">\n""";
"""<div class="inner">\n""";
$this->print_entry_footer($e);
"</div>\n</div>\n";

$e->print_wrapper_end();
}

The code above has places to change the metadata label text to your own custom images. If you would also like to change the tag label text to a custom image, put this in your Custom CSS box:

If anyone has any problems with the above codes, I'll try to do what I can to help. Fair warning: while I do know some CSS, I'm not that good with layer editing.

Tags:

!tips and resources

carene_waterman

Recently a style submission had a clever and subtle CSS transition effect that a lot of people liked.

This demo page of link effects might be of interest to fans of this sort of thing.

Heed the warnings about browser compatability.

Tags:

!tips and resources

carene_waterman

Are you at the point in working with CSS where you know how to poke at a style to change some colours or fonts, but anything beyond that is guesswork?

You know, where you want that thing over there, so you try display: block and float: left and when that doesn't work you get out the position: absolute?

If so, you might enjoy a quick and fun tutorial that will show the basics of layout.

Learn CSS Layout is a modern, up to date set of quick lessons demonstrated right on the page with code and examples that show you how things work in a browser.

The site is done up in bright, fun colours, painlessly exposes you to a bit of HTML5 and will get you started with moving things around.

I also like that the more info links are to serious, grown-up sites with guaranteed quality information (so no old forum posts or W3Schools)

Tags:

!tips and resources

tyger

Okay, so. Over in this entry

tropicsbear asked about putting hir's moodtheme picture on the left of the metadata.

awakened provided a link to an entry with the same question, where

mmmag had provided some S2 code that works for all metadata except tags (because tags aren't actually metadata in the code).

awakened mentioned that having tags as well would be super cool, I agreed, tried to make it work, failed hardcore and flailed in #dreamwidth. At which point

afuna was super awesome and patient and fantastic, and fixed it all up, despite it being "a bit weird because you're combining the $currents, which is basically making a string and printing it out later with print_tags, which prints it out *right now*". And then I failed to copy-paste the code correctly, so I'm putting it up as an entry instead of yet another comment.

Was that convoluted enough? Anyway, here's some code that will put your moodtheme image on the left!

Step 1: Make a theme layer. (Tutorial for how to make and use a theme layer here!)

Step 2: Copy-paste this code into your theme layer: ( Code! )

Step 3: Hit save and compile, and assuming you're already using the theme layer, you're done! If not, use the theme layer, as described in the much more awesome tutorial linked to in step 1.

Tags:

momijizukamori

Okay, so I've looked through the wiki and through the style comms I've found, and I haven't managed to find a nice clear set of guidelines for this. I'm interested in getting started on designing some new styles for submission as official ones, but before I get too deep into CSS, I want to make sure the layout conforms to the basic standards for official styles. So far I've discovered that 1) it has to have 1em as the base font size and 2) must be fluid-width. Are there any others? I'm probably mostly going to be working off of Tabula Rasa and it's descendants, if it matters.

Tags:

!tips and resources

rise

i was tweaking my own journal layout today out of boredom, and i think i've figured out a workable way to customize the triangles for expanding cut tags. ( contains css and pseudo-css code examples )

what do you all think?

Tags:

adalger

For all you writers out there, I ran across this: http://writethisfanfic.dreamwidth.org/50828.html

Tags:

!tips and resources

feathertail

~~How do I make the userpics appear in Tabula Rasa?~~ Edit: This fixed itself somehow, see below. Some clarification for the future would help though.

What all would I need to do, in order to make that comm's style suitable for posting as a new Tabula Rasa layout on dreamscapes? I mean sans the comm-specific customizations. There's all kinds of stuff I'm still learning here, and things that I still need to style, but I'm not sure what the next step should be. (I was thinking of posting the code on Gitorious though.)

What's involved in creating a new color layout for an existing theme? Because I was thinking of using Funky Circles for my personal journal, but it needs a new color scheme. I'm thinking "Peanut butter and chocolate."

About that first question: I Firebug-inspected the comments on

becomeyourfursona and on a journal that had visible userpics, and I couldn't see any CSS rules that seemed relevant. But after applying the following styles to .comment:

background: none repeat scroll 0 0 #EFEFEF; margin: 3em 0 4.6em 0; padding: 2.7em; position: relative;

... the problem mysteriously solved itself. Any idea why? Was the text element somehow overlapping the userpic due to one or more of those properties not being set?

Thanks again in advance either way!

Tags:

foxfirefey

Just in case some of you don't watch

dw_styles, there's a post up about plans for improving S2 documentation, and you're welcome to give input!

Tags:

kaigou

Where can I find the function that controls the reply box's layout and CSS? I can find references to what I think might be it, in DW's S2 basic source code, but I can't find anything that outlines the actual function. It doesn't seem logical (though it's possible) that it's entirely js-created entirely on-the-fly, seeing how there is CSS in there, but I can't find the mechanisms that would let me fiddle with the reply-box as a whole. Anyone have any ideas?

Tags:

zvi

http://www.lighthouse.org/accessibility/effective-color-contrast/
http://wearecolorblind.com/

People may find this useful when working on colorschemes, I thought.

Tags:

cesy

I've done a very draft beginner's guide to styles-y things at http://cesy.dreamwidth.org/235706.html - partially prompted by some comments in

princessofgeeks' journal.

Any comments or feedback on how to improve it would be much appreciated.

Tags:

foxfirefey

ColorSuckr helps you create matching color themes from an image. Could be useful for people!

Tags:

adalger

Here in

getting_started,

ninetydegrees answers a couple questions about how to control the colors of certain navigation links that don't have convenient selectors in the style customization area. I thought this was a nifty bit of information that deserved to be shared.

Tags:

foxfirefey

ColourLovers has a web based palette maker tool called Copaso. Might be useful to style/theme makers!

Tags:

foxfirefey

Okay, so the contextual popups right now seem to be defining the background color as white but not the foreground color for links. On styles like mine where the foreground color is light, this is an awkward combination. However, somebody (forgot who, sorry, tell me if it was you!) linked me to Tutorial: Make the contextual popup pretty on LJ and I've used it on my style to very pleasing ends, so I've decided to pass it on.

Tags:

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. 29th, 2025 09:53 pm

Dreamwidth style system discussion

Entries tagged with !tips and resources

Accessibility help!

Metadata and tags to the side of mood theme image.

Creative Link Effects by Codrops

Layout Resource

Mood theme picture on left, including tags: S2 code!

Requirements for new 'official' style layers?

replacing the cut-expansion triangles with other images

Word count meters

A few questions

S2 documentation

the reply box

Some websites w/ info re: colorblindness

Beginner's guide to making your journal look pretty

ColorSuckr

A tip I ran across

Useful color palette tool

Useful link: customizing contextual popups

Profile

April 2025

Links

Syndicate

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags