ThemeShaper Forums » ThemeShaper WordPress Themes

[closed]

Thematic Feature Site site with Acamas styling?

(10 posts)
  • Started 4 years ago by jaus101
  • Latest reply from Hip Hop Klamotten Shop
  • This topic is not resolved
  1. jaus101
    Member

    Hi all,

    General question - I'm looking at buying the Feature Site, but prefer the styling of the Acamas site - is it possible to change the styling of the Feature Site, and how hard would it be?

    I'm guessing it would just be a style.css thing, but in particular I want the top nav from Acamas, font styling, as well as having the Feature Site feature box on the front just like the Acamas Feature... is this something a novice (with okay css knowledge) accomplish?

    Would I have to buy both themes to get the necessary tools?

    Apologies if this seems stupid, but I'm completely new to Wordpress/Thematic themes, and am completely intimidated...

    Please let me know,

    Jaus

    Posted 4 years ago #
  2. Just buy the Thematic Feature Site and anyone with good css skills should be able to give you the look and feel of the Acamas Theme.

    Both themes use almost the same html (for the menu, wrapper, content area, comments) so getting the look and feel of the Acamas ported to the Feature Site shouldn't be an issue.

    If you're just getting started with Thematic here's a big list of tutorials:
    http://esdev.net/build-wordpress-sites-fast-with-the-thematic-theme-framework/

    Posted 4 years ago #
  3. jaus101
    Member

    Hi Sareiodata,

    Thanks for your reply.

    I bought the Feature Site and am trying to customise it via CSS, with a bit of success so far.

    I'm trying to change the top nav menu to reflect the Acamas top nav menu, but am running into a few issues.

    There are gaps in between the tabs, and too much space between the top nav and the header - i've looked but can't find where extra padding is - is this something i'd have to override the parent theme with?

    Cheers,

    Jaus

    Posted 4 years ago #
  4. That Extra space comes from the default.css style inside Thematic. It's inserted by default.

    /* Apply default theme styles and colors */
    @import url('../thematic/library/styles/default.css');

    What you want to do is copy all that css and paste it at the beginning of your style.css after all the other @import calls, right before the
    /* =Global Elements
    -------------------------------------------------------------- */

    After that you can find the css for the #branding div that it has a big padding, the spacing between the Heading and the menu.

    As for the gaps between the menu you can have a look at my Early Morning Child Theme (it's free to download) css. The menu is inspired from Acamas as well and it's implemented on the same HTML you now have in the Feature Site. Because of this you could just copy paste the css(the one on the ) and then make small modifications to fit your bill! :)

    Just search for /* =Menu
    -------------------------------------------------------------- */
    inside the Early Morning Theme!

    Cheers.

    Posted 4 years ago #
  5. jaus101
    Member

    Hi Sareiodata,

    I tried to do as you said, but pretty sure I stuffed it up :(

    I put the basic menu code back instead of what I was playing with, and added the default css as instructed, and experimented a bit with it, but to be honest the code is far beyond me.

    Could you please look at it? It's www.eduspeculator.com

    Please excuse the current messy state it's in, clearly a long work in progress.

    I just want the top nav menu exactly the same as Acamas http://www.vietwebdisk.com/themeshaper.com/acamas/

    Also, how would I remove the search bar just for the home page?

    BTW, i really like the look of the Early Morning theme - the first font letter and comment/author location are a nice touch.

    Thanks,

    Jaus

    Posted 4 years ago #
  6. Hi Jaus,

    search for

    add_action('thematic_header','childtheme_searchform',7);

    in the functions.php and comment it out

    // add_action('thematic_header','childtheme_searchform',7);
    .

    Chris

    Posted 4 years ago #
  7. Put this css instead of what you have for your menu inside the style.css of your site:

    /* =Menu
    -------------------------------------------------------------- */

    .skip-link {
    display:none;
    }
    #access {
    width:985px;
    border:none;
    margin:20px auto 21px auto;
    overflow:visible;
    }

    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .sf-menu {
    line-height: 1.0;
    }
    .sf-menu ul {
    position: absolute;
    top: -999em;
    width: 10em; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {
    width: 100%;
    }
    .sf-menu li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
    }
    .sf-menu li {
    float: left;
    position: relative;
    }
    .sf-menu a {
    display: block;
    position: relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    left: 0;
    top: 2.5em; /* match top ul list item height */
    z-index: 99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
    }

    /*** THEMATIC SKIN ***/
    .sf-menu {
    border:none;
    border-bottom: 1px solid #ccc;
    float: left;
    margin-right: 60px;
    padding-right: 20px;

    }

    .sf-menu a {
    border:none;
    padding: 8px 0;
    text-decoration: none;
    margin-left: 20px;
    }

    .sf-menu .current_page_item a, .sf-menu .current_page_ancestor a, .sf-menu .current_page_parent a {
    border-bottom: 3px solid #92bf9b;
    margin-bottom: -2px;
    padding: 8px 0 7px 0;
    color: #fe5757;
    background: none;
    }

    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #626262;
    }
    .sf-menu>a:hover {
    background: none;
    }
    .sf-menu li {
    background: none;
    }
    .sf-menu>li:hover{
    background:none;
    }
    .sf-menu li li {
    background: #fff;
    padding: 0 10px;
    }

    .sf-menu li li:hover {
    padding: 0 10px;
    }
    .sf-menu li li a{
    margin:0;
    border-bottom:1px solid #e3e3e3;
    }
    .sf-menu li li a:hover{
    margin:0;
    border-bottom:1px solid #e3e3e3;
    }
    .sf-menu li li li {
    background: #fff;
    padding: 0 10px;
    margin-left:15px;
    }

    .sf-menu li:hover, .sf-menu li.sfHover {
    }

    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    outline: 0;
    border-bottom: 3px solid #92bf9b;
    margin-bottom: -2px;
    padding: 8px 0 7px 0;
    color: #fe5757;
    background:none;
    }

    .sf-menu li li a:focus, .sf-menu li li a:active, .sf-menu .current_page_item li a, .sf-menu .current_page_ancestor li a, .sf-menu .current_page_parent li a {
    border-bottom: 1px solid #e3e3e3;
    padding: 8px 0 8px 0;
    margin: 0px;
    color: #333;
    }
    .sf-menu li li a:hover{
    border-bottom: 1px solid #e3e3e3;
    padding: 8px 0 8px 0;
    margin: 0px;
    color:#fe5757;
    }
    .sf-menu ul {
    -moz-box-shadow:2px 2px 3px 0 #878787;
    -webkit-box-shadow:3px 3px 3px #878787;
    }

    .sf-menu li:hover ul, .sf-menu li.sfHover ul {
    top: 32px; /* overriding essential styles */
    }

    .sf-menu ul ul {
    margin-top: 0;
    }

    .sf-menu ul a {
    background: none;
    border-bottom: none;
    }

    .sf-menu ul a:hover {
    color: #fe5757;
    }

    Posted 4 years ago #
  8. jaus101
    Member

    Hi Sareiodata,

    Thanks for that!

    I modified the theme using your modded code, and then modded it again to reflect mine... however there is still a gap between the bottom-border and the thicker parts - how do i fix that?

    Also, how do I put another link in the footer, where the login etc is? I was hoping to add a disclaimer...

    How do I sort the category list btw - I'm not keen on the alphabetical layout.

    I was also hoping to add an email subscribe option to the primary aside, below the RSS option - how would I do this?

    Thanks for all your help guys,

    Cheers,

    Jaus

    Posted 4 years ago #
  9. gpearne
    Member

    Hi Sareiodata,

    I've been studying the code but am a little stumped at trying to get the blog title and menu on the same horizontal space, just like you have on your Early Morning theme... I'm working with feature thematic theme as well. I've already removed the search feature in functions php. Any ideas?

    I'll keep looking into it. Maybe I'll figure it out

    cheers

    Posted 4 years ago #
  10. Hi all,
    thanks for your help!!! I build my Hip Hop Site with Thematic and the acamas child theme and I love it - It s clean and stylish!!

    Greetings from Berlin
    Moritz

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.