Some tweaking required to an Adelle theme with Premium

  • Unknown's avatar
    heirloomedesign · Member ·

    Hi, I’m new to wordpress and recently upgraded to premium using the Adelle theme. I’m pretty okay with the design of the page, but there are a few features I would want to change before I post an entry. I’ve been searching for help and found some good pointers, but there are still some specifics I can’t find the answer to. If anyone can help me I would really appreciate it!! The things I want to do are:

    1. Make my Logo to appear on the left hand side in the header instead of the centre
    2. Make the black ribbon on the header to span the whole width of the page
    3. Create an About Me Image in the sidebar with some text below and a ‘Read More’ link to another page
    4. Have any pink text on the page appear as #FF1493 instead
    5. Have bigger social media icons in black, and have them centered on the sidebar (I have the icons but don’t know how to embed them)
    6. Embed a subscribe via email submission form
    7. Remove/change the footer text

    Any other help to do with further customizing the sidebar would be great as well!!

    The blog I need help with is: (visible only to logged in users)

  • staff-jeanpierreac · Staff ·

    :D Not bad! There are a good bunch of questions! let’s try to answer them little by little…

    1. Make my Logo to appear on the left hand side in the header instead of the centre

    You can get this effect just changing text-align property of your header. To do that, using a little bit of CSS magic, just add this to your custom CSS

    .site-header {
    text-align: inherit;
}

    You can check how to add custom CSS code, in this support topic: https://en.support.wordpress.com/custom-css/

    I will go on with the other questions later :)

  • staff-jeanpierreac · Staff ·

    2. Make the black ribbon on the header to span the whole width of the page

    Your black ribbon span the whole width in narrow screens (well, not so narrow ;), so I assume you mean in wider screens. In this case, your #page selector has a max-width of 63.750em; (em means the size of your current font as explained here: http://www.w3schools.com/cssref/css_units.asp) and your black ribbon is as wide as this #page element. If you make your #page wider, your black ribbon will be wider, but also your content and widgets area. Is that what you want? In this case, try this css code, adjusting the width to your needs:

    @media screen and (min-width: 37.5em)
.site {
    max-width: 70em;
}

    3. Create an About Me Image in the sidebar with some text below and a ‘Read More’ link to another page

    To do this, I suggest you to take a look to the about.me widget. You can find more info about it, in this support topic:
    https://en.support.wordpress.com/widgets/about-me/

    4. Have any pink text on the page appear as #FF1493 instead

    If I understand you, you would like to use this color for your links, isn’t it? If so, here it is the code:

    a, a:visited {
    color: #FF1493;
}

    If you want to use this color for your paragraph text:

    p {
    color: #FF1493;
}

    In other case, please, make us know what text do you want in this pink color (Maybe by adding a piece of text as an example).

  • staff-jeanpierreac · Staff ·

    5. Have bigger social media icons in black, and have them centered on the sidebar (I have the icons but don’t know how to embed them)

    Yes, again CSS code. :)

    To center them:

    .widget_wpcom_social_media_icons_widget ul {
    text-align: center;
}

    And to choose color and size (please adjust values to your needs):

    .widget_wpcom_social_media_icons_widget .genericon {
    color: black;
    font-size: 25px;
}
  • staff-jeanpierreac · Staff ·

    7. Remove/change the footer text

    Before doing that, you should read terms of service:

    11. Attribution. Automattic reserves the right to display attribution links such as ‘Blog at WordPress.com,’ theme author, and font attribution in your blog footer or toolbar. Footer credits and the WordPress.com toolbar may not be altered or removed regardless of upgrades purchased. http://en.wordpress.com/tos/

    Anyway you could add your very own copyright credits after/before your “Blog at WordPress.com. | The Adelle Theme.” message.

    If you want that, I would suggest you to open another thread with a descriptive title (so one for each question). The same for new questions or even chained questions with any other solved in this thread. Those descriptive titles and specific questions help a lot to get the most out of the forums and allow other users to find answers to their own problems :)

    You can find a started guide to forums, here:
    https://en.forums.wordpress.com/topic/forums-faq-getting-started-in-the-forums

    Have a great day and enjoy blogging!

  • Unknown's avatar
    heirloomedesign · Member ·

    Thanks so much for your help raulanton!! Just about everything was cleared up here! It’s a bit exciting seeing css work for the first time! haha

    The only complication I found was with changing the link colour. All of the links on the whole page become FF1493 including the navigation bar, but I just want those ones to stay white (maybe have a pink underline) Is that even possible?

  • staff-jeanpierreac · Staff ·

    Hi again!

    The selector for your navigation bar links is “.navigation-main li.current_page_item a, .navigation-main li.current-menu-item a” so you can always set another css rule for this. For instance:

    media="all"
.navigation-main li.current_page_item a, .navigation-main li.current-menu-item a {
    color: blue;
}

    I hope this helps!

  • The topic ‘Some tweaking required to an Adelle theme with Premium’ is closed to new replies.