Shortcode: [cast-page]

[Frumph]

Description:
Will display an auto-generated list of your characters with descriptions.

Directions on using:

1. Create a new page.
2. Editing the page, add the shortcode, [cast-page] to it, exactly as written.
3. Click update or publish on your page you just created to save it.
4. Add page to menubar if you want it on the menubar.

CSS Elements & Styling:

.cast-box - The box that contains each of the characters
.cast-pic - The box the image for the character is in

Adding Character Image to the Cast Page:

First you need to know what CSS to use, it starts with .character then the name of the character in slug format (slug means that its a lowercase dash seperated naming convention for URL and CSS usage).

Code: Select all

.character-<character-slug>

Example: If you have a character named "Mad Dog" it should look something like this:

Code: Select all

.character-mad-dog

You can find out what it is exactly by 'viewing the source' of your page or using something like firebug for the firefox browser to get the exact.

Then, knowing what element to use for that character after finding it, you can add the image for it. Store the image on your server or upload it via the media library which will give you a link to the local drive location for it.

Code: Select all

.character-mad-dog {
     background: url('http://frumph.net/wp-content/uploads/2012/05/mad-dog.jpg') top center no-repeat;
}

Note that the url for your image will be different, use the one the media library has in it for the image you uploaded or use one relative to the URL you use for where you put the image.

The default height and width of the image to use is 150h by 150w, 150x150.

FAQ:

Q? The boxes extend passed the available width that I have on my page and get cut off, how do I fix that?

A. By changing the width of the .cast-box and .cast-info elements with CSS. .cast-info starts out with a width of about 370px wide, and it is contained in the .cast-box that has a starting width of 530px; to start.

Code: Select all

.cast-box { width: 480px; }
.cast-info { width: 320px; }


Will reduce it, remember whatever you take from box, you have to remove also from .cast-info

[ryank119]

I've entered the code exactly as stated with my own urls and no images show up. Here is my code:

- bad code removed, - the mgmt

[ryank119]

My images won't show up at all. I thought I placed everything right:
[cast-page
.character-foster {
background: url('http://i445.photobucket.com/albums/qq178/ryank_119/City%20Folk/foster-2.png') top center no-repeat;
}
]

[Frumph]

... you don't add css to the [cast-page] box, you add CSS to the stylesheet, or inside of Theme Companion.

[ryank119]

something like:

.cast.pic { .character-foster { background: url('image.png') top center no-repeat; }} ?

[Frumph]

Code: Select all

.character-foster { background: url('http://yoururl.com/images/image.png') top center no-repeat; }


[ryank119]

Thanks! Looks like it works so far!

[Ryo]

Hello,

I have three questions about the cast page

1. Are you talking here about the css of the theme/child theme, or the one in /wp-content/plugins/comic-easel/css ?
Because this last one override my modifications in the css theme folder. But I know I can add an ! important attribute to override the plugin css (same thing for the archive page).

2. Is it possible to have a simple way to change the url of the character page? like www.website.com/character/ryo ? In fact I would like to translate it. Or with a .htaccess?

3. Concerning the translation I always update the /wp-content/plugins/comic-easel/functions/injections.php to translate Characters on the comic page, it seems the lang on the plugin folder doesn't change it, or do I miss something?

Thanks!

[Frumph]

1. child theme or theme companion (plugin)

2. /character/ comes from comiceasel.php the main file in the plugin directory

Code: Select all

   register_taxonomy('characters', 'comic', array(
            'hierarchical' => false,
            'public' => true,
            'labels' => $labels,
            'show_ui' => true,
            'query_var' => true,
            'show_tagcloud' => false,
            'rewrite' => array( 'slug' => 'character', 'with_front' => true, 'feeds' => true ),
            ));


More appropriately it comes from the 'slug' => 'character' portion of it. You can change that slug to anything you want. .. simple ? no..


3.

Code: Select all

$before = '<div class="comic-characters">'.__('Characters','comiceasel').': ';


It's using translation code, it might not be in the .mo / .po file; I just use PoEdit to create the translation files; hrm no idea why it' didnt grab it. looks fine to me

[Ryo]

1. I already use a child theme but the plugin css override it, so I will use the !important attribute I think

2. Thanks that help me to take the right one, it's not a big deal for me change it at updates.

3. I have to check again with the .pot... I use POedit also.

Thank you for your time again, seems I'm almost done with the design :-)