slideshow.php
While the problem seems complicated the fix is actually very easy. The solution required editing a couple php files but we will only be commenting out code so anybody regardless of coding knowledge can do it. Commenting out php code tells the particular line of code not to run and is done using only two characters (//). The first file we need to edit is arras/library/slideshow.php which obviously controls the slideshow. Go to line 16 and you should see:

'exclude'            => $post_blacklist,

We will need to comment out this line of code by putting // in front of it. The code at line 16 should now look like:

//'exclude'            => $post_blacklist,

What we just did was tell the slideshow not to look into other post sections to see what they are displaying. Now we want to tell it not to allow other post sections to look in the slideshow to see what it’s displaying. To do that go to line 48 and you should see:

arras_blacklist_duplicates(); // required for duplicate posts function to work.

Just like before we need to comment out this line of code. After you comment it out is should look like this:

//arras_blacklist_duplicates(); // required for duplicate posts function to work.

home.php
Now that we’ve gotten the slideshow to work the way we want it’s time to comment out the exclude rule in home.php which control what you see on the homepage. In my case I want the featured posts #2 not to look at other post sections to see what posts they are showing. Simply go to line 58 and you should see the following line of code:

'exclude'            => $post_blacklist,

We need to comment out that line of code so that it looks like this:

//'exclude'            => $post_blacklist,

Now the homepage functions exactly the way I want it too. If you need other post sections on the homepage to not follow the rule all you have to do is comment out the 'exclude'            => $post_blacklist, line for each post section you want to ignore the rule. Each section is clearly labeled in the home.php file. If there is enough interest in it I will show you how to actually make these edits and option that shows up in the theme options page.

Fatal error: Call to undefined method Arras_Widget_Tag_Cloud::WP_Widget_Tag_Cloud() in ..../wp-content/themes/arras/library/widgets.php on line 355

To fix this, simply replace line 355 of /library/widgets.php from:

function Arras_Widget_Tag_Cloud() {
    $this->WP_Widget_Tag_Cloud();
}

to:

function Arras_Widget_Tag_Cloud() {
    parent::__construct();
}

P.S: The new admin interface blends well with the theme options layout

EDIT (05/07/11): Alternatively, you can download Arras 1.5.1 here, which has it fixed.

I made a quick fix for this behavior but unfortunately I don't have the time to test it as much as it should be tested. If you make the following changes to some of the files, the jQuery UI-files are only loaded if a Tabbed Sidebar is used and the Cycle-PlugIn is only loaded if the Slideshow is activated in the settings.

It would probably be a good idea to modify new versions of Arras so it doesn't load stuff it doesn't need (and IMHO it really DOES matter if 50 KB of unused JS-files are loaded or if not...)

So here we go:

library\slideshow.php

replace

add_action('wp_footer', 'arras_add_slideshow_js');

with:

if (arras_get_option('enable_slideshow') && ( is_home() || is_front_page() )) {
    add_action('wp_footer', 'arras_add_slideshow_js');
}

header.php

replace

wp_enqueue_script('jquery-ui-tabs', null, array('jquery-ui-core', 'jquery'), null, false);

with:

if (is_active_widget('arras_tabbed_sidebar')) {
    wp_enqueue_script('jquery-ui-tabs', null, array('jquery-ui-core', 'jquery'), null, false); 
}

and replace

if ( is_home() || is_front_page() ) {
    wp_enqueue_script('jquery-cycle', get_template_directory_uri() . '/js/jquery.cycle.min.js', 'jquery', null, true);
}

with:
   

if (arras_get_option('enable_slideshow') && ( is_home() || is_front_page() )) {
    wp_enqueue_script('jquery-cycle', get_template_directory_uri() . '/js/jquery.cycle.min.js', 'jquery', null, true);
}

finally, replace:

wp_enqueue_script('jquery-ui-tabs', null, array('jquery-ui-core', 'jquery'), null, false);

with:

if (is_active_widget(false, false, 'arras_tabbed_sidebar')) { 
    wp_enqueue_script('jquery-ui-tabs', null, array('jquery-ui-core', 'jquery'), null, false); 
} 

js/header.js.php

Replace

$('.multi-sidebar').tabs();

with

<?php if (is_active_widget(false, false, 'arras_tabbed_sidebar')) { ?>
$('.multi-sidebar').tabs();
<?php } ?>

I'm running a community with a video-section. Mostly videos hosted on blip.tv and vimeo are shown. I needed a solution to fetch thumbnails from my articles containing the embeded videos to be shown when viewing the video-category.

Yesterday I found this WP-plugin, it's called Video Thumbnails and can be found here: http://wordpress.org/extend/plugins/video-thumbnails/

I use the plugin together with the code I found here: http://www.arrastheme.com/forums/topic2 … based.html (post #4) - there, a custom field is used and you have to manually resize the thumbnail, so it's not really an "automatic" solution.
Here is my adapted code (arras/library/tapestries.php) - I'm using Arras 1.5.0.1. In tapestry.php at the very bottom search for

$postheader .= arras_get_thumbnail($tapestry . '-thumb');

and replace this line with following:

$video_thumbnail = get_video_thumbnail();
    if($video_thumbnail){ 
    $postheader .=  "<img src='" . $video_thumbnail . "' width='195' />"; }
    else 
    {
    $postheader .= arras_get_thumbnail($tapestry . '-thumb'); }

so finally the last lines of code in this file look like this:

/**
 * Helper function to display headers for certain tapestries.
 * @since 1.4.3
 */
function arras_generic_postheader($tapestry, $show_meta = false) {
    global $post;
    
    $postheader = '<div class="entry-thumbnails">';
    $postheader .= '<a class="entry-thumbnails-link" href="' . get_permalink() . '">';
    $video_thumbnail = get_video_thumbnail();
    if($video_thumbnail){ 
    $postheader .=  "<img src='" . $video_thumbnail . "' width='195' />"; }
    else 
    {
    $postheader .= arras_get_thumbnail($tapestry . '-thumb'); }
    
    if ($show_meta) {    
        $postheader .= '<span class="entry-meta"><span class="entry-comments">' . get_comments_number() . '</span>';
        $postheader .= '<abbr class="published" title="' . get_the_time('c') . '">' . get_the_time( get_option('date_format') ) . '</abbr></span>';
    }
    
    $postheader .= '</a>';

    $postheader .= '</div>';
    
    $postheader .= '<h3 class="entry-title"><a href="' . get_permalink() . '" rel="bookmark">' . get_the_title() . '</a></h3>';
    
    return $postheader;
}

/* End of file tapestries.php */
/* Location: ./library/tapestries.php */

In addition to that, I tweaked my archive.php (arras/archive.php) to display different categories in different displays (videos are displayed in "default" mode). This is important - if you use another "mode" (traditional or archive_display) you have to adjust the thumbnail-width in the tapestries.php in this line.

 $postheader .=  "<img src='" . $video_thumbnail . "' width='195' />"; }

So, if you install the Video Thumbnails plugin, just activate, write an article, embed a video (in the editor-window) from vimeo, youtube or blip.tv and save it.
After saving you will see the video-thumbnail and it's url somewhere on the right displayed in a widget (in my case the widget shows under "Featured Thumbnail"-widget. That's all. No need for uploading/downloading a thumbnail - just embed the video - that's it.

You can see a working example on my site: http://www.minemusig.at/blog/category/musigtv/

I'm not really a programmer, so no real support. For me, it works nice - hope it does for you, too - in case, say thank you 

Greetings,
Harald

If you want round corners on your Arras site, instead of the boring borders, simple CSS can make round corners, even with shadows!

For the simple round corners, add this CSS to the image border rulesets in your default.css folder,

-moz-border-radius: 6px; -webkit-border-radius: 6px; }   (after the last "}" erase, and leave the ending "}" , do not add separate brackets, the rulesets are not being specified to anything.

To add the shadows to the border,

-moz-box-shadow: 2px 2px 2px #dddddd; -webkit-box-shadow: 2px 2px 2px #dddddd; }

To see it in action, visit http://savannahvideocentral.com

in header.php below

.

Please note that the gravatar's js file is on my localhost. if you want to directly insert the js file from gravatar's server, please paste the following line:

It is a great future provided by Gravatar

In this example I'm going to add a link to my YouTube Channel.  (This functions goes in functions.php)

function add_extra_sociallinks() { 
            ?>
        <li><a id="youtube" title="<?php printf( __( '%s on YouTube', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="http://www.youtube.com/user/watkijkikoptv" target="_blank"><?php _e('YouTube', 'arras') ?></a></li>
        <?php 
}
add_action('arras_quick_nav', 'add_extra_sociallinks'); 

Now all that is needed is a 16x16 icon which will be added to user.css or style.css (if you use a Child Theme).

.quick-nav #youtube { background: url(images/youtube.png) no-repeat; }

Here is an example of what I've done with my site:

The Forums | The Normal Website

Make sure you have a phpBB forum installed before you start this process, and that your forum style closely matches your normal website.

Step 1 - Open up your normal website and open the page source.

Find:

<div id="header">

Step 2 - If you want only the header on top of your forum, copy everything up to:

</div><!-- #header -->

If you want to include the navigation bar from your normal website, copy everything up until:

 </div><!-- #nav -->

Step 3 - Open up your overall_header.html file of your forum and paste the code you got from your normal website. Each forum is going to require that you paste it in a different spot, so it's going to take some trial and error.

Step 4 - Once you've done that, you have to head over to your wordpress site's CSS files and copy the CSS files for your header, nav or anything else that affects your header. Paste the CSS from your normal website into either stylesheet.css or colours.css.

That's basically all you have to do! If you have any other questions, don't hesitate to ask.

One thing: updates of the parent theme don't destroy your customizations. You are working in a seperate folder which uses all the functionalities Arras Theme has.

How do I make a Child Theme?

Copy the folder "sample-child-theme" to wp-content/themes and rename it. For this Quick Guide I'm going to make a Child Theme named 'Kuro' (which means Black in Japanese).

There's a style.css in the sample-child-theme (now named Kuro). Open it and you'll see this.

/*
Theme Name: Child Theme of Arras Theme
Theme URI: http://www.arrastheme.com/
Description: Child theme for the Arras Theme for WordPress
Author: Creature
Author URI: http://www.arrastheme.com/
Template: arras-theme
Version: 1.0
.
For more information on how to create and use child themes:
http://codex.wordpress.org/Child_Themes

Any CSS code written below will override any existing
declarations from the theme itself.
.
*/

Change this part into anything you like

Theme Name: Child Theme of Arras Theme
Theme URI: http://www.arrastheme.com/
Description: Child theme for the Arras Theme for WordPress
Author: Creature
Author URI: http://www.arrastheme.com/

Mine is now:

/*
Theme Name: Kuro
Theme URI: http://www.kuro.ex
Description: Black Child Theme for Arras
Author: Giovanni / Extatix
Author URI: http://www.animeblog.nl
Template: arras-theme
Version: 1.0
.
For more information on how to create and use child themes:
http://codex.wordpress.org/Child_Themes

Any CSS code written below will override any existing
declarations from the theme itself.
.
*/

You're now ready to go. Go to WordPress and select Apperance - Themes. You'll now see your newly created Child Theme.

Press activate and you are ready to go. If you now visit your site you'll see a standard Arras Theme. Next thing we are going to do is change some colors. Let's say I want a completely black background (the theme is called Kuro after all).
For that I need to add

#wrapper { background: #000; }

to the stylesheet.

You do that in the style.css located in the child theme folder (aka Kuro).

It'll look like this now.

/*
Theme Name: Kuro
Theme URI: http://www.kuro.ex
Description: Black Child Theme for Arras
Author: Giovanni / Extatix
Author URI: http://www.animeblog.nl
Template: arras-theme
Version: 1.0
.
For more information on how to create and use child themes:
http://codex.wordpress.org/Child_Themes

Any CSS code written below will override any existing
declarations from the theme itself.
.
*/

#wrapper { background: #000; }

Which results in:

That's all you need to know. Put changes in the css in the style.css and it will overrule the default.css / legacy.css (whatever you choose in the theme options).

The big plus of this (I'll repeat it):
Let's say you've put about 50 lines of css in the style.css and Arras Theme 1.4.4 is released. Simply update it and your changes are still there. No more worries about redoing css stuff.

Neat, huh?

Simply include this line in functions.php:

require_once ARRAS_LIB . '/admin/custom-header.php';

just before:

require_once ARRAS_LIB . '/launcher.php';

I'm no expert, but I think it's safe to say that this will only work if you haven't set your Features Posts to a specific category.
He's put it into use on my blog ( www.k-jessop.co.uk ) and my value is set to 6 to offset my 6 featured posts.

Hope this helps people.

Method #1: CSS Editing via WordPress Editor

You'll need a web browser with a certain web developers tool, for this guide I shall use Firefox 3.6 with Firebug.

I recommend that you have a basic understanding of Cascading Style Sheets (CSS) for this method. A good site to start is W3Schools.

Step 1: Ensure that Arras Theme is activated and working in your WordPress installation.

Step 2: Go to Appearance > Editor. You should see something like this:

Step 3: Under the Templates column on the right, select user.css (located at the bottom of the list). You should see something like this:

Step 4: Now, in a new tab/window, go to the page that you wish to edit. For this guide, I shall edit the home page:

Step 5: Next, click on the Firebug icon located at the bottom of your page. The Firebug tab should pop up.

Step 6: Click on this button to start inspecting the area you wish to edit:

Step 7: Hover your mouse to the area you wish to edit. When you have chosen your desired area, click on it. The border should disappear, and the values in the Firebug tab should change.

Step 8: You can play with the CSS properties at the Style tab on the right column. For example, I have changed the color of the header:

Step 9: Once you are satisfied with the changes, copy the CSS code of the whole element and paste it in the Editor:

Step 10: Save the changes, refresh the page and you have successfully customised your theme!

This tutorial is based on the default.css. If you want to make a change do it to the user.css, it's an empty css which will 'overwrite' the default.css. So there's actually no need to fiddle with the default.css. In most parts I'll simply give the part which you can put in the user.css, so if you see .widgetcontent { color: #fff; } you can copy/paste that one into your user.css and change the colorcode to your liking. You can combine parts of course. If you see .widgetcontent { color: #fff; } and .widgetcontent { background: #fff; } you can combine it to .widgetcontent { color: #fff; background: #fff; }

There are parts which require some more tweaking but I'll put up an explanation why.

Question numbero uno, what colorcode is red (or yellow, or green)? I'm a lazy bastard, so here's a link.

This is the basic 'index' of the tutorial. I've added 14. Quick preview & 15. Older entries/Newer entries, which are not on the image

And yes, I have created a new install for this tutorial, hence the Arras Tutorial title of the blog

The forum will crop this beyond recognition so here's the url to the 'full' image

http://www.watkijkikoptv.info/mp3/Arras_Tutorial.png

1. Header Background

Header background

#header                    { background: #fff; }

Advanced: I want to have have a header which is 980px wide (like the page)

#header                    { background: none; }
#branding                    { background: #fff !important; }

2. Navbar

This one is a hoot to figure out

Navbar

#nav                    { background: #fff; } 

Advanced: I want to have have a navbar which is 980px wide (like the page)

#nav                    { background: none; }
#nav-content                     { background: #fff; } 

Color of links/text on the visible bar

.sf-menu a                 { color: #fff; }

Color of links/text on the dropdowns

.sf-menu li ul a                 { color: #fff !important; } 

3. Blogname

.blog-name a:link, .blog-name a:visited    { color: #fff !important; }

(Advice, don't display the blog description)

.blog-description                { display: none; }

4. Header Border

header                    { border-bottom: 5px solid #fff; }

Advanced: I want to have have a header border which is 980px wide (like the page)

#header                    { border-bottom: none; }
#branding                    { border-bottom: 5px solid #fff; }

5. Searchbar

Border around the searchbar

#searchbar                { border: 4px solid #fff; }

Color of the searchbar

#searchbar                { background: #fff; }

Color of the searchform (where people put in the sh*t what they are looking for)

.searchform .s                { background: #fff; }

6. Widgetcontent

Color of the border

.widgetcontent                { border: #fff; }

Color of the text

.widgetcontent                 { color: #fff; }

Color of the links in the text.
This one isn't actually there yet, but you can add it quite easily.

.widgetcontent a                { color: #fff; }

Color of the background

.widgetcontent                { background: #fff; }

7. Widgettitle & Border

Color of the border

.widgettitle                { border: #fff; }

Color of the title.

.widgettitle                { color: #fff; }

Color of the background

.widgettitle                { background: #fff; }

8. Main slideshow

Title

.featured-entry .entry-title        { color: #fff; } 

Description

.featured-entry .entry-summary        { color: #fff; } 

Border

.featured                    { border: 5px solid #fff; }

"Black bar"

.featured-entry                { background: #fff; }

9. Color of title

.home-title                { color: #383331; }

The border under it.

.home-title                { border-bottom: 1px solid #fff; }

Note: You can add a background color here, it will give a colored bar.

.home-title                { background: #fff; } 

You might want to add this one too if you do this

.home-title                { width: 645px; }

You can even put a border around the bar.

.home-title                { border: 1px solid #fff; }

You might want to add this one too if you do this

.home-title                { width: 643px; }

(You probably noticed the 643px vs 645px from above, this is because of the 1px border on both the left and right side of the bar.)

10. Nodes

Entry title

.posts-default .entry-title a:link, .posts-default .entry-title a:visited    { color: #fff; }

Entry summary

.posts-default .entry-summary        { color: #fff; } 

Border around the image

.posts-default .entry-thumbnails-link    { border: 5px solid #fff; }

'Black bar'

.posts-default .entry-meta        {  background: #fff; }

Date on the 'black bar'

.posts-default .published            { color: #fff; }

Number of comments on the 'black bar'

.posts-default .entry-comments     { color: #fff; }

11. Main background

#main                    { background: #fff; }

12. News Section (if you choose per line)

Color of the category the posts are in.

.posts-line .entry-cat        { color: #fff;}

Advanced: I do not want the category to be shown there. (Note: if you do this, the entry titles will shift to the left, so there won't be a blank space)

.posts-line .entry-cat        { display: none; }

Entry titles

.posts-line a:link, .posts-line a:visited    { color: #fff; }

Color of the comments

.posts-line .entry-comments    { color: #848485; }

Advanced: I do not want to show the (the amount of / or lack of) comments

.posts-line .entry-comments    { display: none; }

13. Footer

Color of the entire footer

#footer                    { background: #fff; }

Color the text

#footer                     { color: #fff; }

Color of 'About arras.theme

.arras                    { color: #fff !important; }

This footer is a widgetspace too. You can change the appearance of the widget like part 7. of this turorial, just add #footer in front.
Example:

#footer .widgetcontent                { background: #fff; }

14. Quick preview

Entry title

.posts-quick .entry-title a:link, .posts-default .entry-title a:visited    { color: #fff; }

Entry summary

.posts-quick .entry-summary    { color: #fff; } 

Border around the image

.posts-quick .entry-thumbnails    { border: 5px solid #fff; }

The things beneath have to be activated in the theme options, do this only if you are going to change the size of the thumbnails in the news section. These are by

default too small to handle date + comments. Make them as big as the normal quick preview size.

'Black bar'

.posts-quick .entry-meta    {  background: #fff; }

Date on the 'black bar'

.posts-quick .published    { color: #fff; }

Number of comments on the 'black bar'

.posts-quick .entry-comments { color: #fff; }

Read More text

.posts-quick .quick-read-more a:link, .posts-quick .quick-read-more a:visited    { color: #fff; }

Read More Background

.posts-quick .quick-read-more a:link, .posts-quick .quick-read-more a:visited    { background: #fff; }

Read More border

.posts-quick .quick-read-more a:link, .posts-quick .quick-read-more a:visited    { border: 1px solid #fff; }

15. Older/Newer Entries

Color of the older/newer entries (text)

.navigation a { color: #fff; }

Color of the older/newer entries (background)

.navigation a { background: #fff; }

Color of the older/newer entries (border)

.navigation a { border: 1px solid #fff;  }

EXTRA!

"I want the color to change when hovering the cursor of their mouse over something."

Yeah, me too. Just add :hover.

See this example:

.widgetcontent                { background: #000; }
.widgetcontent:hover                { background: #fff; }

Normally the widget in this example has a black background, when somebody moves their mouse over it it will change to white. You can virtually add this to any element.

But remember kids, less is sometimes better.