Category: Themes Toggle Comment Threads | Keyboard Shortcuts

Sometimes we have to dive deep into some scary code to make a theme or plugin do what we want. Here are some articles that deal with such things.

Keep in mind that software evolves fast and a tweak that worked a year ago may not work anymore today.

  • Jay Versluis 11:20 am on February 20, 2013 Permalink | Reply
    Tags:   

    Categories: Themes   

    How to style the Add Media button in P2 

    Screen Shot 2013-02-20 at 11.08.52

    Before…

    I’ve noticed that the Add Media button in P2 version 1.4.2 is a bit too low when you write a Blog Post.

    The button usually sits neatly above the status box, however it cuts into the top of the box due to the additional text field for the blog post – like so:

    It’s not so pretty. As a quick fix we can shift it a few pixels higher, therefore it won’t interfere with the box anymore:

    /* The Add Media button is too low when a blog post is selected */
    #media-buttons {top: -2px;}

     

    Add it to the bottom of your style.css sheet and you’re golden!

    ... and after the fix

    … and after the fix





     
    • Scophi 9:37 pm on February 25, 2013 Permalink | Reply

      I found your P2 User Guide website and am glad that this theme is still active and being developed. I enjoyed reading about what you can do with lists. Very impressive.

      I wanted to let you know that I have a P2 site that I have modified heavily. I have re-organized and simplified the stylesheet, corrected some postbox problems, and made a few other tweaks. I’d be honored if you took a look.

      http://www.scophi.com

      I would not mind if you used any of my tips or tricks in either of your blogs. I don’t need credit. I just want to share what I have learned about P2.

      Thanks!

      • Scophi 9:39 pm on February 25, 2013 Permalink | Reply

        Sorry, I forgot to mention that my list of modifications is a page, not a post, called P2 Theme Modifications. Here’s the link:

        http://www.scophi.com/?page_id=206

        • Jay Versluis 11:38 am on February 26, 2013 Permalink | Reply

          Thank you Scophi, always good to meet a fellow P2 lover 😉 I’ll add your link it to the P2 User Guide!

          • Scophi 7:54 am on March 15, 2013 Permalink

            Jay-

            I have changed my website and no longer use P2. But I did update my P2 modifications page and wanted to give you the updated link so you could correct the reference links here and on P2 User Guide.

            Scophi’s P2 Theme Modifications: http://scophi.com/archives/8

            Thanks!

          • Jay Versluis 10:14 am on March 15, 2013 Permalink

            Thanks for the heads up, very kind of you. I’ve updated the P2 User Guide with your new link.

    • Jay Versluis 11:24 am on May 8, 2013 Permalink | Reply

      UPDATE:
      A new version of P2 has been released (1.4.3) which addresses several improvements under the hood. Sadly they haven’t fixed the above graphical problem, but I’ve just checked – my tweak still works with version 1.4.3.

      See the new improvements in the P2 User Guide before they disappear from the front page of p2theme.com:
      http://p2guide.wordpress.com/2013/05/08/p2-version-1-4-3-released/

  • Jay Versluis 10:24 am on April 16, 2012 Permalink | Reply
    Tags:   

    Categories: Themes, WordPress ( 145 )   

    How to bring back Post Categories in P2 

    We’re all excited about the new features in Automattic’s P2 Theme v1.4.0 – however many of us have setup custom tweaks around Post Categories. In the latest version these have been replaced with Post Formats.

    Post Formats are great, but they are limited to values defined in the WordPress core. If you wanted to create a new post menu like “critical” or “alarm” this wouldn’t work. We could use Custom Post Types to add to those formats, however it’s way too big an operation for I wanted to achieve: which is bringing back the “posting into categories” feature we’ve come to love from the previous version.

    In this article I’ll show you how to back-port categories so posts will appear as they did in P2 v1.3.3 while retaining all functions of the latest update.

    (More …)





     
    • Ali 3:19 am on May 6, 2013 Permalink | Reply


      <a id="thoughts" class="post-format-button"class="selected" href="" title="">
      <a id="culture" class="post-format-button" class="selected" href="" title="">
      <a id="news" class="post-format-button"class="selected" href="" title="">

    • HG 7:14 pm on July 27, 2013 Permalink | Reply

      Hello, this hack works in P2 version 1.5.1 ?

    • Chris Bell 11:11 pm on September 22, 2013 Permalink | Reply

      What I’d like to be able to do is assign all of the P2 posts into an existing custom post type, e.g. Status Updates.

      I’m integrating P2 with a parent theme, so I’m hacking the theme as best I can.

      • Jay Versluis 9:50 am on September 23, 2013 Permalink | Reply

        Hi Chris,

        the answer lies in a file called post-form.php. This generates the buttons above the post box and sets the post type for each button. Look for an unordered list towards the top of the file and change them to your desired format.

        One thing about P2 child themes: they don’t seem to work properly, I’m not sure why. I’ve noticed that some modifications you make in your child theme don’t make it into the final output.

        • Chris Bell 3:59 pm on September 23, 2013 Permalink | Reply

          Hi Jay,

          My oversight: I accomplished posting to a special post_type by adding a hidden post_type input field.

          Now if only I could get the p2_load_entry to work correctly. 🙂

  • Jay Versluis 5:50 pm on March 24, 2012 Permalink | Reply
    Tags:   

    Categories: Themes, WordPress ( 145 )   

    How to tweak P2: adding and replacing categories 

    Today I’m going to tweak the marvellous P2 Theme by Automattic.

    P2 is one of my all time favourite themes – not only because it transforms WordPress into something completely different, but also because it’s an innovative way we communicate internally here at WP Hosting. If you don’t know P2 yet, do check it out at p2theme.com and watch the video.

    At the time of writing P2 is at Version 1.3.3 and has been since November last year. Code changes quickly, so by the time you’re reading this my ramblings may be out of date.

    Let’s have a look at how we can add and amend the default categories (i.e. Status Update, Blog Post, Quote and Link).

    (More …)





     
  • Jay Versluis 11:58 pm on June 14, 2011 Permalink | Reply  
    Categories: Themes, WordPress ( 145 )   

    How to style the Motion Theme for WordPress 

    I had a closer look at this theme the other day when I made some upgrades on Nadia’s website.

    I really like the look and feel of Motion but I felt certain things were missing from this wonderful theme, such as drop down submenus.

    Let’s take a look at some tweaks and how you can make Motion your own.

    This article was written for Version 1.1.6 – these tweaks may not work in later revisions of the theme.

    (More …)





     
    • Guy 1:15 pm on November 3, 2011 Permalink | Reply

      Hi there
      thanks for advices.
      Any idea to change background pic according to page?
      Actually I’d like to get a specific backround for the front page (which is a page choosen by myself) and leave a single color bg on the rest of site
      Thanks for your possible answer
      Cheers

      • Jay Versluis 2:46 pm on November 3, 2011 Permalink | Reply

        Hi Guy,

        the background image is set in style.css on line 45 in the body element, just underneath General Elements:

        /************************************************

        • General elements *

        ************************************************/
        body {
        background: #000 url(images/bodybg.jpg) top center no-repeat fixed;
        padding-bottom: 20px;
        font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
        text-align: center;
        }

        Replace the url (images/bodybg.jpg) with your own image URL (like http://yourwebsite.com/yourimage.jpg) and you’re ready to rock. Please note that the Appearance – Background dialogue does not work for this theme.

        Making this conditional is another story – you’d have to do the page check in PHP and then load the re-define the CSS. It means a lot of code rewriting and it’s beyond the scope of this article.

        Hope this helps 😉

        • Guy 3:37 pm on November 3, 2011 Permalink | Reply

          Hi Jay
          Thanks a lot for your reply and please forgive my bad English… I’m French.
          Here’s the sit I’m making for an artist (tempo.)
          http://www.info-france.fr/christakiger-art
          As you can see there’s a pic on frront page with an armchair. This is a problem to read further post or shop post.
          That’s why I would like to keep the home page with this pic and get another one for the rest of site.
          I used the background theme function to upload the pic. I guess there’s a way to set a conditionnal to force this pic only on front-page but I’m very poor in css so I have to learn or to get a similary needs already solved! 🙂 (No I’m not lazy!)
          Thanks again for your help… I go on searching.
          Regards from Cannes!!! Where it’s really hard to drive today!

          • Jay Versluis 3:59 pm on November 3, 2011 Permalink

            The only way to do it would be to have two identical stylesheets, one for the front page, and one for the rest of the site. The only difference is the background image. The stylesheet loads in the WordPress header.php file – see where that happens and add a PHP query to see which page this is (use the is_home() function for this). Then load the appropriate stylesheet.

            I’ve never done this myself, so that’s just the way I would do it. Hope it gets you on the right track (and I hope the Cannes traffic is going to calm down soon ;-))

      • Tim Clare 3:59 pm on November 3, 2011 Permalink | Reply

        Hi Jay,

        Thanks for your quick response. It wasn’t the menu’s that I was asking assistance with (although I will probably edit those at some point using your notes above.

        On my site timclare.com there is the page title text “Home” that appears on the line just before “welcome to my homepage”. This is the text I would like to hide. And if this is easy enough to do I assume I would be able to change some other pages to hide the title (i.e. not in the menu but on the page itself) too?

        I assume I will need to change some of the motion themes code in he editor but can’t figure our which bit!

        Many thanks for your help,
        Tim

        • Jay Versluis 4:29 pm on November 3, 2011 Permalink | Reply

          Oh that – no problem Tim, it’s the Post Title for your page template. Looks like you’re using the defaut page template so we’ll modify that.

          Have a look at your page.php file and find this block of code:

          <?php if (!(the_title() == "")){ ?>
          <divclass="posttop">
          <h2 class="posttitle"><?php the_title(); ?></h2>
          </div>
          <?php } ?>

          Delete the entire thing (don’t comment it out), save your file and you’re good to go. Make sure you make a copy of the unmodofied file just in case.

          Note that this will remove page headers from all pages using the default template. If you change a page to use the Template with Sidebar your headings wll be back, so you still have some control.

          Hope this helps 😉

          • Tim Clare 5:47 pm on November 3, 2011 Permalink

            Fantastic! Worked like a treat! Thanks for all your help! A++++

    • Mark 3:00 pm on December 7, 2011 Permalink | Reply

      Hi Jay,

      First : thanks for your time writing these advices ! It helps me a lot !… my client too… 🙂

      I’m trying to center the primary menu, without success so far… I’ve tryied several ways but only the sub menu’s texts seems cooperative 🙁

      Any ideas ? 🙂

      Again, big thanks !

      Mark

      • Jay Versluis 11:15 pm on January 2, 2012 Permalink | Reply

        Hi Mark,

        yes you’re right, it doesn’t like being centered as such automatically. You’ll have to shift it manually until it’s in the right position – have a look at this bit of code in style.css:

        .primary_menu li {
        float: left;
        background: url(images/blacktrans.png);
        line-height: 2em;
        margin: 5px 0 5px 5px;
        }

        See the last 5px in the margin CSS? If you tweak that to 50px or 100px it’ll shift the primary menu over to the right a bit. Play with that last value and see which way you like it best.

        Hope this helps 😉

    • Saar 8:54 pm on January 2, 2012 Permalink | Reply

      Hi, I’m trying to invert the “Leave a comment”, meaning that the area for leaving a comment will be on top of the comments and not at the bottom of the page…
      I would really appreciate your help if possible.

      Thanks in advance,
      Saar.

      • Jay Versluis 10:56 pm on January 2, 2012 Permalink | Reply

        Hi Saar,

        no problem – have a look at the comments.php file. At the very bottom, you’ll find three small lines of code like this:

        <?php
        if (comments_open( $post->ID )){ comment_form(); }
        ?>

        This generates the “Leave a Reply” box. Cut it and paste it right underneath the following code in the same file:

        //WP 2.7 Comment Loop
        if ( have_comments() ) : ?>

        That should do the trick!

    • Saar 10:22 pm on January 3, 2012 Permalink | Reply

      Thanks for replying!
      It worked 🙂

      If I may, I’m having another difficulty…I’m using a ‘page with sidebar’ in the website, and trying to show a different picture (than the one being used through out the site – using ‘simple image’ widget) in just one of the pages.
      Do you know of a right way to do it?

      Thanks very much

      • Jay Versluis 2:33 pm on January 21, 2012 Permalink | Reply

        That’s a bit of a custom coding job to be honest. It’s not difficult to do, but there’s no widget I can think of that does this. Basically you’d setup a PHP query that asks “which page am I displaying”, and then display a picture accordingly. I’d add this to the sidebar.php file. Not sure if I’ll get the time to write some code for it though – sorry.

    • Joao 3:05 am on March 4, 2012 Permalink | Reply

      Hi,
      I’m trying to add a left sidebar to the motion theme. Can anybody help me?
      I’m trying to build a site for a very good friend of mine and I’ve been stuck for ages.
      Thanx.

      Joao

      • Jay Versluis 8:12 pm on March 4, 2012 Permalink | Reply

        In all honesty, and as nice as Motion is, it’ll probably take you longer to hack a second sidebar into this theme than to just pick another theme that is built for two sidebars. There are plenty, some of which you can actually specify through theme options how many sidebars you want and where they shall appear.

        TwentyEleven springs to mind, as well as Thesis or Pilcrow.

    • Tracy 8:44 pm on March 31, 2012 Permalink | Reply

      Thanks for the post on this theme.
      I’m sooo frustrated–I only want to change the font in my posts to a larger size. I’ve downloaded Google Fonts and TinyMCE. Fonts doesn’t really tell me how to change the font size and TinyMCE isn’t working.

      I would TRULY appreciate some help–I’m a novice–only blogging a few weeks.

      Thanks.

      • Jay Versluis 9:27 pm on March 31, 2012 Permalink | Reply

        I feel your pain, Tracy 😉 Tweaking a theme can be a long dark path, not necessarily with a happy ending. Which elements would you like to increase in size? The Body text for posts and pages? I always thought they were a bit small by default. Adding this to the bottom of your style.css file will take care of it:

        .postcontent p {font-size: 1.2em;}

        Change the 1.2em value to anything from 0.8 to 2 to change text size. Hope this helps!

    • niemiro 12:49 pm on April 8, 2012 Permalink | Reply

      Hello!

      A truly wonderful post! I wonder if you could help me too, though. I would greatly appreciate it.

      I notice that the Motion theme’s code boxes ( tags) do not stretch as far across the screen as the text does. In addition, the horizontal side bars are only semi-working (I want no wordwrap, and huge horizontal sidebars, instead I get small horizontal sidebars and some wordwrap).

      Any ideas on how to fix this? (increase size of tags, and turn off wordwrap entirely) I would greatly appreciate it. Thanks again for your wonderful post.

      • Jay Versluis 4:47 am on April 11, 2012 Permalink | Reply

        You’re very welcome, I’m glad you liked the post 😉

        I’m not entirely sure what you mean by word-wrap, have you got a link to a site to show me the phenomenon? Same about the tags, do you mean the tags underneath each post? I’m looking at them and they seem to fit underneath each post. A link to the phenomenon in question would certainly help to clarify.

        • niemiro 8:30 am on April 11, 2012 Permalink | Reply

          Thank you so much for your reply 🙂 In retrospect, my message was slightly cryptic!

          When I said tags, what I meant was “code boxes ( tags)”.

          However, I didn’t add a space, and it got parsed away! All I meant was that I was wrapping my code in tags to make it look like a code box.

          If you look at a code box in the TwentyEleven theme: http://niemiro.co.uk/FileShare/1.png

          you will see that the lines do not wrap. The long lines just continue and continue and continue, with a horizontal scroll bar. You can fiddle with this in Notepad: Notepad > Format > Wordwrap. See how it wraps long lines onto new lines, even without any new line characters?

          Anyway, if I put that into the Motion theme, it wordwraps: http://niemiro.co.uk/FileShare/2.png

          Curiously, it has a small horizontal scroll bar, unlike Notepad, but it still wordwraps. I want to disable Wordwrap (I want huge long lines) in my Motion theme. Any idea on how to do this?

          Finally, the code box does not extend the same distance as the text. Do you see how it falls far short of the end of the text in Motion? http://niemiro.co.uk/FileShare/3.png

          Ideally, I would like to make it level with the text.

          Any help you could offer would be very greatly appreciated.

          • niemiro 8:34 am on April 11, 2012 Permalink

            It has done it again! tags (without the underscores) is what I meant. I can’t stop them being parsed away! To make my code boxes, I wrap my text in p_r_e tags, like so:

            My code

            You are very patient and kind 🙂

    • niemiro 8:35 am on April 11, 2012 Permalink | Reply

      Oh dear. I hope you understand now 🙁

      • Jay Versluis 7:25 am on April 12, 2012 Permalink | Reply

        I think I do, those screenshots cleared everything up for me. Looks like Motion isn’t wrapping your lines, it actually cuts them off. If you’re using the PRE tag the “code box” has a width of 600 pixels. I think the author did this so that it will fit nicely on post pages which include a sidebar. If you’re only using PRE tags on full-width pages without a sidebar, you can add this to the bottom of your style.css file:

        pre {width: 940px; overflow: scroll;}

        This will get rid of cutoffs and will make the box fit nicely underneath and above your text. Note however that this will now result in cutoffs on post pages with a sidebar. Let me know if this works for you.

        Code in comments is difficult – for security reasons WordPress strips most tags out. You can usually put them in `backticks` and then they won’t be executed. Here’s a screencast I did about the subject: https://wpguru.co.uk/2011/01/workshop-how-to-post-source-code-in-your-comments/

        • niemiro 12:35 pm on April 12, 2012 Permalink | Reply

          Thank you so much! I would never have solved this without you! In the end, it still wasn’t quite working as I wanted (much better, but not perfect), so I compared the style.css files of TwentyEleven and Motion, and realised that the only significant change was the word-wrap property, and that was what was causing the problem. So in the end, I used

          pre {Width: 935px; white-space: pre;}

          (there was some minor clipping and 940, but nothing 935 couldn’t fix).

          I am so, so grateful for your help. I really would never have done this without you. Thank you so much again 🙂

          Richard

    • David 6:15 pm on April 18, 2012 Permalink | Reply

      Is it possible to set the header of the theme to be fixed as well… and only have the content scroll?? I am not sure how he is getting the transparent scrolling to work in the first place so I am unsure if its even possible.

      Thanks

      Dave

    • JulianM 10:55 pm on May 28, 2012 Permalink | Reply

      Dear Jay,
      thank you so much for your website.
      I’ve a little problem with the comment’s font size.
      The author’s fonts have the right size.
      But the visitors fonts are to big. (for example http://www.julianmyers.com/2012/05/28/anastasia-wird-mein-herzensmann-auf-mich-zukommen)
      Any idea, where I can change it that both are the same size?
      Thank you very much,
      Julian

      • Jay Versluis 4:28 pm on May 30, 2012 Permalink | Reply

        Hi Julian,

        you’re very welcome. I’ve never looked at how Motion deals with comments, so thank you for bringing up your problem. The text differences are indeed very ugly. The great news is all we need is a couple of lines at the bottom of style.css to rectify the issue:

        .postmetaauthor, .bypostauthor {
        font-size: 1.0em;
        }

        The original value is 0.8em which means comments by the post author get displayed smaller than comments by anybody else. This will also fix a problem with nested comments (replies to replies) which get smaller and smaller without it. Hope it works for you 😉

        • JulianMyers 5:33 pm on May 30, 2012 Permalink | Reply

          Dear Jay,

          thank you so very much for your help.
          I would never’ve find it out by myself.

          Greetings from Austria!!

  • Jay Versluis 9:05 am on April 7, 2011 Permalink | Reply  
    Categories: Themes   

    How to style the BuddyPress Default Theme 

    Ray and I have been working on Livestatus, a status report system for television broadcasters. We decided that BuddyPress would be a superb platform to use for this and went with it.

    There aren’t many Themes available for BuddyPress so we went with the default theme which I think works best. However there’s still a lot of clutter we didn’t need so I made some quick amendmends.

    Here are my notes if you’d like to have a go.

    (More …)





     
  • Jay Versluis 4:03 am on January 7, 2011 Permalink | Reply  
    Categories: Themes   

    How to style Modularity Lite 1.3 by GraphPaperPress 

    Modularity Lite returns with version 1.3, this time boasting WordPress Menus and a dynamic slideshow option to keep us excited. You can even change colours and your background image. Making it your own was never easier. Here are my notes from when I created minor amendmends for Simon’s website SoundCredit.tv.

    My original article on how to style this puppy goes back to version 1.1. With each update, the code has dramatically changed and therefore needs different tweaks. If you’re running an older version of Modularity Lite, check out my instructions for Version 1.2.

    (More …)





     
    • Max 12:40 am on February 11, 2011 Permalink | Reply

      It worked perfectly! You rock, Jay!

    • Naomi Epstein 3:59 am on February 15, 2011 Permalink | Reply

      Hey there,
      These are such great tutorials. My questions for you is, I wanted to change the color of the middle strip from gray to white and my text from white to gray. Can you help me break down the whole code thing???

      Thanks
      Naomi

      • Jay Versluis 12:50 pm on February 17, 2011 Permalink | Reply

        Hi Naomi,

        sorry about the delay in my reply – I’ve been working on a backup plugin for WordPress… You may have fixed this on your site already – since I can’t find a grey middle strip. Did you mean the one under “Latest” on the front page?

        Those are some lovely portraits by the way 😉

    • Chantal Handley 4:07 am on February 24, 2011 Permalink | Reply

      Hi Jay,

      Is there a way to modify the footer at the bottom that reads

      Blog at WordPress.com. | Theme: Modularity Lite by Graph Paper Press.

      I wanted to add a copyright to this and change the colour etc.

      Thanks

      Chantal

      • Jay Versluis 8:56 pm on February 24, 2011 Permalink | Reply

        Hi Chantal,

        unfortunately there isn’t – because you’re using the WordPress.com version. Amendmends can only be made to themes when you’re self-hosting because you have full access to the files. WordPress.com is a closed system and can’t be modified.

        Sorry 🙁

        • Chantal 6:28 am on February 27, 2011 Permalink | Reply

          Thats ok…. heres another question then…

          When you add a new page the site adds a new link at the top! Is there a way to swap the menus around and rearrange them!

          Thanks

          Chantal

          • Jay Versluis 9:49 am on February 27, 2011 Permalink

            Yes there is – luckily WordPress.com have upgraded the Modularity Lite theme and now you can use the WordPress Cusom Menu function. Have a look under Appearance – Menus. You can create a new menu here and populate it with the items you want to appear at the top and order these any way you like.

          • Chantal 11:11 am on February 27, 2011 Permalink

            Legend!!

    • Peter 1:48 am on February 25, 2011 Permalink | Reply

      Is there a way to show images on the slideshow, without LINKING to any posts. In other words a slideshow that’s not CLICKABLE.

      • Jay Versluis 11:37 am on February 25, 2011 Permalink | Reply

        Hi Peter,

        yes that is possible: have a look at your index.php file and find the following line of code – this is called when the theme had a successful look for images to put in the slideshow (it’s just underneath a comment that reads // Cool. Now, if we actually have an attachment…

        <div class="slide"><a href="<?php the_permalink(); ?>" rel="bookmark">
        <?php echo wp_get_attachment_image($first_attachment->ID, 'modularity-slideshow' ); ?></a></div>

        You can see the link being generated with the opening and closing a tags – let’s remove them:

        <div class="slide"><?php echo wp_get_attachment_image($first_attachment->ID, 'modularity-slideshow' ); ?></div>

        Result: no more clickable slideshow 😉

    • Alan 10:52 pm on February 26, 2011 Permalink | Reply

      Hi Jay,

      Thanks for all of your tutorials here so far, but there is one issue I am stumped on. When I add a table to this theme, the default is to have every other color white: http://burningshore.com/musi/concerts (there is a three line “test” table near the top).

      Do you know how to turn this off? I am assuming it is in the css stylesheet, but I’ve searched the Google and the stylesheet itself for hours and can not find anything. I believe this feature was intended for something else, but when applied to a table, it make the lines unreadable as the text color and background are the same.

      Thanks!

      Alan

      • Jay Versluis 10:39 am on February 27, 2011 Permalink | Reply

        Gee Alan,

        this was a tough one! This behaviour is part of the Blueprint CSS Framework which Modularity Lite uses. Have a look at your screen.css file and hunt for a section called /* typography.css */ in which you’ll find the following line:

        tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}

        Delete this line or comment it out and Tabular Happiness is waiting for you 😉

        • Alan 3:14 pm on February 27, 2011 Permalink | Reply

          Jay,

          Thank you so much!!! It worked. I had to find this file via FTP. Not only didn’t I know that file existed, I never would have found that line had I known. I will definitely be bookmarking this site for future reference.

          You are the man. I’ve sent a couple of coffees your way!

          Cheers,

          Alan

          • Jay Versluis 9:35 pm on February 27, 2011 Permalink

            Thank you so much for those coffees 😉

            I had trouble finding that second stylesheet too – the import line in style.css gave its existence away. Glad it works for you.

            All the best–

    • Doug 3:09 pm on February 28, 2011 Permalink | Reply

      Jay,
      Thanks for all your work on this, I was sad they took out the function of selecting images for the slide show, and very pleased with your script and directions for adding it back! I was wondering if you know if it’s possible to add the ability to have people sign up for RSS feeds of the posts I make. Most themes seem to have this feature, but Modularity Lite does not have it that I can find. Any help would be appreciate. Thanks again for all these tips.

      • Jay Versluis 4:24 pm on February 28, 2011 Permalink | Reply

        Hi Doug,

        I’m glad you’ve enjoyed those tips. Much like the slideshow, the RSS link was available in older versions of the theme. You can bring it back by adding this line of code anywhere you’d like it to appear:

        <a href="<?php bloginfo('rss2_url'); ?>">Subscribe to content</a>

        You can wrap this link around an RSS graphic if you like. Alternatively, you can add a link to your custom navigation menu (under Appearance – Menus) and link it to http://www.yoursite.com/feed/rss.

    • Ark 1:29 pm on March 1, 2011 Permalink | Reply

      Hi !

      Many thanks for this great work!! And many thanks for your advices.

      When using a costom slidshow size (ex 950×200), images seems to be croped from the bottom (I mean the upper part is visible ;).
      Is there a way to change the way images are croped ? I was thinking about something like keeping the center visible (so a crop of top and bottom of the image) ?
      For now the solution I use, is to insert pre-formated images (950×200). But I’m afraid I’ll not bealways abble to edit images (no time or no soft on the computer)

      Thank’s again.

      • Jay Versluis 12:39 pm on March 2, 2011 Permalink | Reply

        Pass I’m afraid… sorry!

        I can’t think of a way to accomplish this since th eimage is displayed at a given spot and then covered at the bottom by the bottom that’s defined by the height of the slideshow. There’s always the integrated image cropper you can use when you upload an image – that’ll help you to get the image dimensions right when you post.

        • Ark 4:58 pm on March 2, 2011 Permalink | Reply

          Hello and thanks a lot Jay.

          The integrated image croper seems to have no effect on the images in the slideshow.

          For now, the solution I found (assuming you only have change the image height of the slideshow in the style.css – in this exemple 200px) :

          – Create an 950*425px image with your favourite image-editing software. This will recieve the “slide” you want.

          – Open the image you want to be in the slideshow, then edit it to obtain the 950*200px “slide” you want to show.

          – Put (copy/duplicate/move…whatever you want; ) this part at the top of 950*425 picture. Save for web with a name you can remember (ex mypic-slide.jpg)

          – Now create your new post. Using the media manager, add “mypic-slide.jpg”, don’t insert it in the post, save changes.

          – Now you can insert any picture you want (or not at all) in your post. “mypic-slide.jpg” will be the slide corresponding to this post.

          I hope this will help. And again,thanks for your great work.

    • Patricia 9:09 pm on March 2, 2011 Permalink | Reply

      Hola muchas gracias por el tip!!

    • Jade 7:35 am on March 10, 2011 Permalink | Reply

      Hello Jay,

      How are you ?

      Recently, I have tried to insert some tables to my pages but I have one problem, the borders would not appear even after writing “1” as a border value. I used some plugins like “Easy Table Creator” and I also tried to include tables using html code but the result is the same, I still get transparent borders…You can see an example at the bottom of the first page of my website.
      Your help would be greatly appreciated.
      Thanks a lot !

      • Jay Versluis 11:41 am on March 10, 2011 Permalink | Reply

        Hi Jade,

        yes Modularity Lite has a “hidden” stylesheet called screen.css which is located in wp-content/themes/modularity-lite/library/styles. In it there are some base specifications for table. Under the heading /* typography.css */ you’ll find the following entry:

        table {margin-bottom:1.4em;width:100%;}

        Amend it to this

        table {border: 5px solid red; margin-bottom:1.4em;width:100%;}

        and your table will have a 5 pixel wide black border around it. Tweak this to the colour and width you like – just make sure it remains “solid” and you’re good to go.

        Hope this helps 😉

    • Jade 1:35 pm on March 10, 2011 Permalink | Reply

      Hi Jay,

      Great tip, it works well. However, I still can’t see the lines and columns of the table, which are still transparent. Any thoughts on this ? Thanks

      • Jay Versluis 1:58 pm on March 10, 2011 Permalink | Reply

        Replace “table” with “table, th, td” and you’re good to go – like this:

        table, th, td {border: 5px solid red; margin-bottom:1.4em;width:100%;}

  • Jay Versluis 1:22 pm on October 15, 2010 Permalink  
    Categories: Themes   

    How to style AutoFocus by Allan Cole 

    One of my all time favourite themes is AutoFocus by Allan Cole – it’s a superb portfolio theme that lets your pictures to the talking. Great for sites that show off images.

    I wanted to use it over at Cloud-TV but thought that a different colour scheme would better suit my pictures – so I took some notes on how to amend certain aspects of the theme. You may find these useful if you’d like to style the theme to your own needs.

    Please note that at the time of writing AutoFocus is at Version 1.0.1 – it is likely to be the final standalone theme and it’s no longer under active development. These tweaks will NOT work for Autofocus Plus or Plus Pro.

    (More …)





     
    • yesjorn 1:28 pm on January 7, 2011 Permalink

      For my new site I want to use the free version of the AutoFocus theme. I like the slick and minimalistic appearance but I would REALLY like to adjust the size of the images on the front page. In a perfect world they would be all the same size as the top post-image. Any suggestions?

      Thanks a million!!

      • Jay Versluis 1:47 pm on January 7, 2011 Permalink

        Hi Yesjorn,

        that is possible indeed – assuming you’re talking of Autofocus Plus where the first image is full width (that is what you mean, right?). Have a look at your style.css file and find the section that says

        /* Image Grid for the Home Page */
        .blog #content {margin-top:0px;padding:0;}
        .blog #content .hentry {width:396px;height:300px;overflow:hidden;float:left;margin:0 4px 4px 0;padding:0;clear:none;position:relative;}
        .blog #content .hentry.p1 {width:100%;margin-right:0;} /* < -- start changing from here */ .blog #content .hentry.p2 {width:602px;} .blog #content .hentry.p3 {width:192px;margin-right:0;} .blog #content .hentry.p4 {width:296px;}

        and so forth. You'll find about 30 entries here. Change all the width values to 100% (from the one I've marked) and all your images will be full-width on the front page.

        Hope this helps 😉

        • yesjorn 4:22 pm on January 8, 2011 Permalink

          great work! thanks Jay. I tried to look for the code to change the width of the front page (every actually) is 900 pix wide possible (and advisable)? I really like the cinema ratio and want to use it for the pictures on the front page (and possibly in the posts too.

          I want you to know that I’m very happy that I came across your site because I’ve been looking for it for ages!

          cheers.

    • yesjorn 4:51 pm on January 9, 2011 Permalink

      Hey Jay,
      I’m so sorry to bother you again.
      I really like the theme but I’m trying to customize it a little. Tweak, if you like. However I’m a newby when it comes to coding. I’ve managed to install wordpress locally using MAMP (for mac) so I don’t mess up realtime 😉
      But now I encountered a couple of ‘problems’
      On a post page (is that the correct name?)
      It displays the ‘date’, ‘Filed under Uncategorized’ and ‘Bookmark the permalink’
      I already got rid of the date using a plugin but I have no clue where to look in order to remove the permalink section (don’t even know what is does!)

      Besides I saw a couple of people on this blog who added a picture (logo) to their site in the aotofocus+ (not PRO) version. How? I don’t know. Next I would like to know how to change the overall width of the site fom 800 to 900.
      A lot of questions, I know. But hours and hours of searching and pulling hair gave me….nothing!!

      Thanks a million!!

      • Jay Versluis 8:28 pm on January 9, 2011 Permalink

        That’s OK, you can always buy me a coffee to say thanks 😉 Well done for getting MAMP up and running!

        So you’re displaying a single post, and you’d like to get rid of the Meta Descriptions in the sidebar (above your widgets) correct? There is a file called thematic-functions.php in the Autufocus Plus directory. Have a loko at it and find the following piece of code (under the // Autofocus Post Meta Section):

        if (is_single()) { ?>
        <div>
        <span><abbr title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('j M') ?></abbr></span>
        <?php if ($af_show_exif_data == 'true' && has_post_thumbnail() && ($data[ 'videoembed_value' ] == '')) { ?>
        <span><a href="<?php echo exif_link(); ?>/#exif-data"><?php _e('View Exif Data', 'thematic') ?></a></span>
        <?php } ?>
        <span><?php printf(__('Filed under %s.', 'thematic'), get_the_category_list(', ')) ?></span>
        <?php echo get_the_tag_list("<span class=\"tag-links\"> Tagged ",', ','.</span>'); ?>

        This code gets called before the rest of the sidebar is loaded. To get rid of the date, categories, tags and the permalink change it to this:

        if (is_single()) { ?>
        <div>
        <?php if ($af_show_exif_data == 'true' && has_post_thumbnail() && ($data[ 'videoembed_value' ] == '')) { ?>

        Only “Leave a comment”, Trackback and Edit will remain. Now for the Logo. Have a look in your header.php file. Find You can place a graphic above the title and navigation by putting the following code underneath the closing </head> statement:

        <div align="center">
        <a href="http://www.yourwebsite.com">
        <img src="http://www.yourwebsite.com/yourheader.jpg">
        </a></div>

        Replace the URLs with yours obviously. The IMG tag inserts the picture, the DIV tag aligns it to the centre of the page, and the A tag wraps a link to your website around it.

        • Jay Versluis 9:00 pm on January 9, 2011 Permalink

          Also, look at Autofocus Pro – it has a header upload feature built-in. At $15 a bargain for the extra functionality you get (plus you have the developer’s undivided attention too). Check it out!

    • yesjorn 3:07 am on January 10, 2011 Permalink

      ok, I guess I owe you a big coffee after this one. 😉
      And seriously, I tried to find it before I ask. (3.09 am now).
      After resizing the content on the frontpage, my right navigation arrow seems to be lost behind the content itself!

      I only adjusted it to 900 instead of 800 wide.
      I’ve seen websites with the arrows more to the sides of the screen but that was in the old autofocus, not the + version.

      thanks a million! (again)

      • Jay Versluis 12:51 pm on January 10, 2011 Permalink

        Hi yesjorn,

        I’ve tried the obvious in style.css and changed width values for header, main, content and container. That makes the framework 900 pixels wide. Further down in that file you’ll find the list that creates the image grid as I’ve outlined above. You can change each of these values to

        .blog #content .hentry.p1 {width:900px;}

        and your pictures would appear in 900 width – however they’re only being called at a max width of 800 and for some reason the browser doesn’t up-size them on the fly (why I don’t know – that’s a question for Allan). The nice thing though is that your picture is then centred in front of the colour you pick under Appearance – Autofocus Plus Options. At least you’ll get a 900px wide display, even though the picture will still be 800 wide.

        The coffee link is at the bottom of the page 😉

    • yesjorn 3:27 pm on January 10, 2011 Permalink

      thanks again Jay!
      I truly appreciate it. Too bad I can’t show you a screenshot of the result (since it’s running locally in MAMP). For the pictures, you’ll have to adjust

      // Add Post Thumbnails Support
      if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
      add_theme_support( 'post-thumbnails' );
      set_post_thumbnail_size( 88, 88, true ); // Default thumbnail size
      add_image_size( 'archive-thumbnail', 188, 188, true ); // Archives thumbnail size
      add_image_size( 'single-post-thumbnail', 990, 600 ); // Single Posts thumbnail size
      add_image_size( 'front-page-thumbnail', 990, 400, true ); // Front Page thumbnail size
      }

      The width of the Front page thumbnail AND (most important) it will only affect newly uploaded pictures! So simply picking one from the gallery doesn’t work.

      My frontpage looks absolutely perfect now if it weren’t for the disappearing arrow on the right hand side!!! I know it’s there because if I scroll down it pops up from underneath the image (on both the front page and post page) but I have no clue how to fix it!

      please..help me, o kind sir.one more time 😉

      thanks a bunch!!!

      • Jay Versluis 5:41 pm on January 10, 2011 Permalink

        That’s an easy fix: in style.css, change the content value back to 800 and that arrow will be back:

        #content {margin:44px 0 0; width:800px; overflow:visible}

        Nice tip on the image sizes – however my front page still displays them with the border on the left/right. I’m not fussed though – I actually like it.

        If you’d like to correct previously uploaded images, have a look at junkcoder’s excellent AJAX Thumbnail Rebuild plugin.

    • yesjorn 7:24 pm on January 10, 2011 Permalink

      Found it!
      Thanks Jay for your help but obviously your tip made my pictures seem 800 wide again and that was what I didn’t want. For changing the position of the arrows (outward) you have to change:

      #nav-above {width:800px;height:0px;margin:0 -100px;padding:0;display:inline-block;position:fixed;top:45%;z-index:1;font-size:88px;line-height:22px;font-family: Courier New, Courier, monospace, sans-serif;}

      If you change the width of the posts on the frontpage you best change the width to 1200.

      I hope someone will benefit from this!!

      • Jay Versluis 7:28 pm on January 10, 2011 Permalink

        Excellent, thanks for sharing! Glad you figured it out by yourself in the end. Have fun with that new website 😉

    • ELeleux 9:49 pm on January 10, 2011 Permalink

      Thanks for all your good ideas. I’m using Autofocus too, and I couldn’t find out how to change the color of the date on the front page. We can change this color by the Autofocus Admin Menu, but it also change the color of all text. How to change it separately ?

      Thanks in advance

      • Jay Versluis 11:14 am on January 15, 2011 Permalink

        Hi ELeleux,

        I feel your pain… but I’m going to have to pass on this one – I don’t know where to change that 🙁

        I had a long hard look at the style.css file and all I can tell you is that this property isn’t set in there. Have a scout for something that contains “h2 entry-title” and an opacity value that’s set to “0”. That’s how the background colour shines through.

        My best advice is to get in touch with the developer – the link to this theme is at the top of this page.

    • Nathalie Quirion 5:19 pm on January 14, 2011 Permalink

      Hi, thanks again for all this great info. It’s been very helpful so far.

      I hit a bit of a problem when I tried to apply the code to add a background image to the template when I could not find the /* Structure section in the style.css file. It is not there in the Pro version of Autofocus which is the one I use.

      Can you help me out? Big thanks in advance.

      Nat

      • Jay Versluis 6:07 pm on January 14, 2011 Permalink

        Hi Nathalie,

        that’s right, Autofocus Pro is very different from the Standard version. You’ll need to find this bit of code in style.css under the /* Layout */ section:

        body {min-width:832px}

        Amend it to this and replace the URL with a link to your background file:

        body {background-image:url('http://yourwebsite.com/background.jpg'); min-width:832px}

        Hope this helps 🙂

    • yesjorn 2:06 am on January 15, 2011 Permalink

      Hey again. I really appreciate your help. People like me, who can’t afford professional expensive support, are thankful to be able to ask stuff to people like you. My website is becoming really nice and I wish I didn’t have any questions for you any more but unfortunately, I do…
      In the demo I saw how Alan had a video running where normally the featured image is displayed. Later on he also does it for a vimeo video AND a flickr slideshow. Needless to say that that’s just awesome!
      That’s exactly what I’ve been searching for for ages but I guess it’s fatigue or something else that makes me not see the obvious….
      I can’t see how he did it!!

      It would be great to have a preview (screenshot of a video) on the front page but the actual video on the top of the post page!!!

      Thanks again and I’m sure to press that coffee button. You deserve it!!!

      • Jay Versluis 10:16 am on January 15, 2011 Permalink

        The Flickr integration is part of Autofocus Pro – you pop in your credentials, Flickr API Key and you can show Flickr galleries within posts. Allan describes this here. You’ll get plenty of extra functionality for a mere $15 – it’s one of the best priced Premium Themes I can think of.

        The video screenshot you’re referring to is done via the Featured Image: Add your video to the post as normal, then check on the right hand side under Post Tags upload a Featured Image. That’s the one that will show up on the front page.

    • yesjorn 2:08 am on January 15, 2011 Permalink

    • Mal 3:23 pm on January 16, 2011 Permalink

      Great post …… Does anyone know how to get rid of the large image on on top of the post in Autofocus Plus Pro?

      • Jay Versluis 11:05 am on January 18, 2011 Permalink

        Hi Mal,

        I’ve had a good hard look and can’t figure out where this is being generated. There seems to be much interest in Autofocus Pro though, so watch this space for a new article specifically for the pro version. Sorry I can’t be of more help at this point 🙁

        • Mal 2:05 am on January 25, 2011 Permalink

          Thanks Jay. I have been messing around. I have found probably the most inelegant solution. In \extension\thematic-functions.php function autofocus_postheader() I have replaced parts that were generating the html with  

           
          ID, ‘copyright_value’, true) ) { ?>
           

           

           

           

          This seems to do the trick. This is my first foray into php. When I get some time will amend it properly.

          • Mal 2:08 am on January 25, 2011 Permalink

            For some reason the code did not paste properly

             
            ID, ‘copyright_value’, true) ) { ?>
             

             

             

             

          • Jay Versluis 8:55 pm on January 25, 2011 Permalink

            Hi Mal,

            that’s exactly the file I had to dig into many times – glad it works for you.

            On the code pasting front: WordPress strips out HTML tags by default – have a look at this workshop where I’m explaining how to post source code in your comments 😉

  • Jay Versluis 12:59 pm on September 23, 2010 Permalink | Reply  
    Categories: Themes   

    How to style Misty Look 

    The other day Richard moved his blog from WordPress.com over to The Guru Network – welcome Richard 😉

    He was using Sadish Bala’s beautiful Misty Look Theme and wanted to stick with it. However, the self-hosted version doesn’t quite look like what he had on WordPress.com, so here are some code tweaks to adjust it.

    Please note that at the time of writing, the latest Misty Look version is 3.8RC – there may be a newer version with different code available. Keep that in mind when you’re trying to apply these tweaks 😉

    (More …)





     
  • Jay Versluis 8:51 pm on August 25, 2010 Permalink | Reply  
    Categories: How To ( 36 ), Themes   

    How to style WP Affiliate Platform 

    I’ve recently done some research on Affiliate Programmes that integrate with WP Ecommerce.

    I came across the excellent WP Affiliate Platform from Tips and Tricks HQ – it works beautifully and is very easy to setup. At only $39 it’s a steal – considering how much business it can generate for you. Thanks Ruhul!

    I wanted to make the front end integrate with my original site – which is just like tweaking a WordPress Theme. Let me talk you through it in this article.

    (More …)





     
  • Jay Versluis 11:46 am on June 3, 2010 Permalink | Reply
    Tags:   

    Categories: Themes   

    How to modify MANSION by GraphPaper Press 

    I wanted to use Mansion for my Miami Beach Huts website. It was ideally suited, however all my images are portrait instead of landscape. Some tweaks were necessary which I thought I’d share with you for endless hours of fun.

    I wrote this for Version 0.2 of this theme. A few things have changed since then, especially the documentation. Keep that in mind while I’ll talk you through some tips and tricks of MANSION.

    (More …)





     
    • Christian 6:56 pm on August 16, 2010 Permalink | Reply

      Jay,
      I'm a bit of noob here, but I have a couple of questions I'm hoping you can answer. I'm running the latest version of Mansion

      The first should be straightforward but I'm struggling.
      1. How can I replace the H1 and H2 with an actual logo in that section?
      2. My 'page' links have no padding. But, when I go into reset.css to adjust the padding on those links it is effecting everything on the page (images, other elements). Is there a way to only shift the links 'page links'?

      wondering how I would go about

      • Jay Versluis 7:23 pm on August 19, 2010 Permalink | Reply

        Hi Christian,

        to put a real logo into the nav box, have a look at the header.php file. In it, you’ll find 3 div tags like this:

        <div id="header" class="box">
        <div class="logo">
        <div class="bottom">
        <h1><a href="<?php echo get_option('home'); ?>/">
        <?php bloginfo('name'); ?>
        </a></h1>
        <span class="description"><?php bloginfo('description'); ?></span>
        </div>
        </div>

        You can put a call to a logo file in after the second or third div tag, depending on what works best for your site – like this:

        <img src="http://yoursite.com/yourimage.jpg">

        Put it just before the closing a tag if you’d like for this to be a link to your home page.

        As for the padding, you can insert this line into the style.css file and adjust parameters accoridngly:

        #header li {padding: 10px;}

        Hope this helps 😉

    • Michael 8:01 pm on August 21, 2010 Permalink | Reply

      Hello, great post. Any idea how I remove the '/' (forward slash) that separates the categories on the left hand side under the site name/logo? Thanks in advance…

    • manny 4:16 am on September 1, 2010 Permalink | Reply

      My homepage is only showing 10 thumbnails… how can I add more? I can’t find where this variable lives.

      Thanks in advance.

      • Jay Versluis 7:11 pm on September 1, 2010 Permalink | Reply

        Hi Manny,

        under Settings – Reading you can define how many posts will be shown – it’s set to 10 by default, but you can increase this.

    • Jack 3:28 pm on September 6, 2010 Permalink | Reply

      Hey Jay, first of all great article! I found this through searching with google exactly how to modify this theme.
      I hope you don't mind me asking for some help.
      What I basically want to do is for a thumbnail on the index page to link to the post's image, instead of the post itself. Possibly in such a way that would work with a lightbox plugin.
      (in other words I'd like to see a big version of the image when clicking on its thumbnail rather than being directed to the medium sized version on its post page).

      I've been messing around with the code on file "images.php" and I found this bit near the bottom:

      /* If $link_to_post is set to true, link the image to its post. */
      if ( $link_to_post )
      $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '';

      so I tried to substitute that "get_permalink" with functions such as "wp_get_attachment_url" but had no luck, I can't get it to return a link to the image in the post.

      If you know anything that could help me on finding a way to obtain this I would be eternally grateful and add a link to your blog on my website.
      Many Thanks
      Jack

      • Jay Versluis 10:06 am on September 7, 2010 Permalink | Reply

        Thanks Jack, much appreciated!

        I think you’re best off to use a simple WordPress trick to make your picture link to something else. Go to edit your post, and then click the “edit image” icon in the top left corner of the image in question. A window opens, and at the bottom you have a field called “Link URL” – that’s where this image will link to. It can link to anything: other posts, a lightbox, you name it. Put in the URL to the “big picture” there.

        To find that URL, you’re already in the right place too: click on “advanced” and in the “source” field is the URL you’re looking for. Copy and paste that for eternal happiness 😉

        You’ll have to do this for every image in every post though. Hope this helps.

      • Jay Versluis 11:25 am on September 7, 2010 Permalink | Reply

        Hi Jack,

        very sorry about the confusion… I thought your question was in regards to Modularity Lite – ignore what I said above 😉

        I’m looking into this for you now with regards to Mansion.

      • Jay Versluis 5:07 pm on September 10, 2010 Permalink | Reply

        Hi Jack,

        I’ve had a good hard look – but I can’t see a way to make it work. Have a word with Justin at Theme Hybrid, he wrote the get_the_image() plugin that drives this theme.

        Good luck! 😉

        • Jack 6:13 pm on September 10, 2010 Permalink | Reply

          Hey Jay,

          thank you so much for looking into it. I had tried myself as many things I could think about but it seems there's no way to make it work. So for the moment I'll just keep it linking to the posts, you can have a look at my website even if it's still missing content http://www.jackdavolio.co.uk .
          I'll add a link to your blog once I'll have finished with filling it up with photos 🙂
          I found the informations on this post very useful, I think its great that people like you are willing to help complete strangers for free through the internet, good karma to you =)
          Thanks again!

    • Pedro 12:29 am on September 11, 2010 Permalink | Reply

      Hello [AGAIN] Jay.

      Actually this is not the first but the second time I write to you. I failed on login by using my WordPress.com account so once I came back my original yet huge comment wasn't here anymore so… Here I go. VERY short…

      1) Thank you very much for this trully handy article.

      2) Issue: The Mansion theme is not, let's say, pushing EVERY image on the front page. If some post has 5 pictures only one of the is featured on the main page. Any idea?

      3) Issue: The category BLOG behaviour changed from one day to another. It just looks ugly, I don't know… Since I never tried to modify anything related to that, I tried reuploaging the original file in order to replace the category-blog.php style sheet. Results: Failed. Any clue?

      Thank you very much in advance.
      I really hope you can help me.
      Greetings from Barcelona!

      Pedro

      • Jay Versluis 9:20 am on September 11, 2010 Permalink | Reply

        Hi Pedro,

        very sorry about the Intense Debate issue – I’m torn if I should keep it or not really. It works well for some things and not so well for others. Thanks for posting again though 😉

        1.) You’re very welcome 🙂 Sounds to me there’s a lot of interest in this theme so maybe I should go and update the article to reflect the latest changes. There’s a LOT of new code in the current version than there was when I wrote this.

        2.) One of those changes is that only one image gets displayed on the front page (the last one you’ve uploaded). This is due to the implementation of the get_the_image Plugin, which doesn’t support grabbing more than one image at a time. You can however choose to grab a different image rather than the last one uploaded. Check the plugin documentation and implement this in the images.php file of this theme.

        3.) I’ve had a look at your site and I see what you mean about the “weirdness” in your blog category. The blog.php may not the the only culprit here, other amendments you may have made to the theme may cause this – hard to say without a look at the source files. Try installing the theme from scratch in a different folder and see what that looks like.

        Good luck!

    • José Hurtado 5:03 pm on October 7, 2010 Permalink | Reply

      Hi!! THANK YOU SO MUCH!!

      but I have a problem, I would like put the firts photograph bigger, like this http://demo.graphpaperpress.com/mansion/

      But I don't know how
      PLEASE HELP ME!!!

      • Jay Versluis 7:16 pm on October 7, 2010 Permalink | Reply

        Thank you José!

        That’s a very easy one: when you write your post, give it a “featured” tag, then your picture will be displayed at twice the size. You can tag your posts on the right hand side underneath categories. Just type “featured” into the tag box and update the post.

        Hope this helps 😉

    • some user 12:16 pm on December 8, 2010 Permalink | Reply

      Hey i have on question. I tried to set up everything. I used an empty WP installation and deleted all. So i have no pages nothing. I created then 3 categories on is claled Blog and slug is blog. Now i created different posts and assigned them to the categories. My problem is now if i create an entry which is supposed to be to the blog category it appears on the startpage with the default image. If i click ion the menu on Blog it shows me than a page with only my blog entry. How can i avoid the blog entries from beeing displayd on the start page?

      PS: sorry for my bad english.

      • Jay Versluis 12:41 pm on December 8, 2010 Permalink | Reply

        Hi there, I know that problem well – and the answer lies in a plugin that will exclude certain categories from the home page of your site. The two I’ve used are Advanced Category Excluder and Simply Exclude. They both work equally well.

        Once you install those, you can select which categories you’d like to show (or hide) from your home page.

    • some user 1:46 pm on December 8, 2010 Permalink | Reply

      Ohh thank you so much. 🙂 Simply Exclude works well.

      You saved my day.

      Greetings

    • promotion 4:38 am on December 23, 2010 Permalink | Reply

      THANK YOU for this guide.My website so cute because you tips.

      very very thanks!

      • Jay Versluis 10:33 am on December 23, 2010 Permalink | Reply

        Hi promotion,

        That’s a very cool use of this theme indeed. Goes to show how flexible these ideas are. Well done!

    • wouter 4:32 pm on December 28, 2010 Permalink | Reply

      Hey Jay!

      Thanks for the great tips, your blog is in my bookmarks! I am working on changing the Mansion theme for a artist friend of mine, so he can display his work in a nice fashion. I got most of it figured out so far, but I would like to remove the hover/rollover function on the index, so the pictures and menu are shown the way they are instead of with the white fade over them… I guess this is just a script thing somewhere, but I can’t find it in the code, do you have any suggestions?

      Wouter

      • Jay Versluis 4:07 pm on December 29, 2010 Permalink | Reply

        Hi Wouter,

        you are correct, this is applied in a file called theme-js.php. Find the following code block:

        // apply opacity on hover
        jQuery(".box, #footer").css({opacity: 0}); // Initial opacity 0
        jQuery("#footer").fadeTo(900, 1.0); // fade #footer opacity to 1.0
        jQuery(".box").fadeTo(900, 0.8); // fade box opacity to 0.8 ***
        jQuery(".gpplogo, .wplogo").fadeTo(900, 0.6); // fade logos opacity to 0.4
        jQuery(".box").hover(function(){
        jQuery(this).fadeTo("fast", 1.0); // fade to 1.0
        },function(){
        jQuery(this).fadeTo("fast", 0.8); // fade back to 0.8 ***
        });

        Change the two positions I’ve marked with *** to 1.0 and the hover/fade thing will disappear. The first value sets the initial state of the Logo area and the thumbnails, and the second one is responsible for what happens when you hover.

        Hope this helps 😉

        • wouter 7:41 pm on December 29, 2010 Permalink | Reply

          Hey Jay,

          Thanks a lot, I got it working… Tried to change it the way you said, removed the cookies and histroy and refreshed it, but it didn’t work. No idea why not actually? When I commented it out, it worked like sunshine!

          Thanks!

          Wouter

          • Jay Versluis 9:11 pm on December 29, 2010 Permalink

            Glad it worked for you!

            I should have been a bit clearer maybe… there are two values for each line I’ve marked. You have to change the first one for it to work, the second one is only a comment. So you’d have to change

            jQuery(".box").fadeTo(900, 0.8); // fade box opacity to 0.8 ***

            into

            jQuery(".box").fadeTo(900, 1.0); // and this is the comment

c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel