Need help? Check out our Support site, then


Needing help with Adelle theme

  1. There are a few changes I would like to make in CSS (Adelle), and I am having quite a hard time trying to figure it out.
    1. I would like to have a "follow me button" inside of my social media text box using my own icon…is that even possible?
    2. I would like to change the "older posts" text to read "past posts". And also change the background from peach to grey in colour.
    3. I would also like to make the bottom ribbon white.
    Thank you for any help that you can provide me.

    The blog I need help with is sunshineinyourday.wordpress.com.

  2. Hi,

    I'll try to answer things partially.

    I would like to have a "follow me button" inside of my social media text box using my own icon…is that even possible?

    With this do you mean to customize the look of the blue WordPress Follow Me button, and then place it next to the other social icons on your sidebar?

    I don't think changing the look of that button is possible. Also, as the Follow Button is a special widget, then I don't think it can be added to the Text Widget you're using to display the social icons.

    I would like to change the "older posts" text to read "past posts".

    Text changes are not possible on WordPress.com, because it will require changing the theme's coding, which is not available.

    And also change the background from peach to grey in colour.

    Not quite sure what background you're referring to, can you please explain?

    I would also like to make the bottom ribbon white.

    Use this CSS:

    #colophon .site-info {
    	background: #fff;
    }
  3. Thank you for your prompt reply to my questions. The background peach colour I referenced is the background of the "older posts" back button at the bottom. I would like it to be grey instead of peach colour. Thank you for your help, the ribbon is now white!

  4. While we can't edit the HTML directly, as hafizr mentioned, there is a bit of a hack you could use to achieve the same effect. Use this in your CSS:

    #infinite-handle span {
        display:  none;
    }
    
    #infinite-handle:after{
        content: 'Past Posts';
        background: lightgray;
        border-radius: 4px;
        color: #fff;
        display: inline-block;
        font-size: 15px;
        font-size: 1.5rem;
        padding: 0.385em 0.838em;
    }

    Basically, this takes away the button initially and then adds another element back in that looks exactly the same.

    You can change the text on the button by changing the words between quotes after the 'content' property. I put 'lightgray' as the background value but you can change it to whatever color you want. You'll probably want to to some research and find the exact hex code of the color you want.

    Just to be clear again, this is a bit of a hack and in a perfect world you wouldn't do this. But since you can't edit the theme code directly, this should get you the same effect.

  5. Thank you for your advice. This worked, and looks much better.

  6. Can you please tell me is there a workaround to link the thumbnail picture on my gallery page to the blog post relating to it if a person was to click on it? I do have the pictures setup as 'gallery' on that page… maybe that isn't the best way?

    Thank you again.

  7. Is this the gallery page?
    http://sunshineinyourday.wordpress.com/gallery/

    Currently, WordPress galleries don't have an option to add links to alternate pages for gallery items like you described. It's possible to add a link in the caption area, but the image would still open a larger version of the image if you did that.

    The best workaround would probably be to insert each image manually so you can add a custom link to each one and then perhaps use CSS to float the images left and give them a standard height so that they appear in a grid similar to how it looks now.

    If that sounds like something you want to try out, try editing the gallery page to add a couple images with the links setup how you want and I can take that and try to help you with a good CSS solution from there.

  8. Thank you for your help with this. I have now put 2 images on the gallery page as 'under testing' so you would know which I had done the custom link on. If you can help with the CSS that would be greatly appreciated. As a side problem I am now having issues with my menu bar not displaying my links beside the HOME button…there should be links to gallery, craft tips, previous posts, and contact pages. If I hold my cursor over where they should be I get the pointer, and if I click on it I go to the page. After this the link then shows in the menu bar but not until I click on it. Any ideas on why that is happening? I can only assume I did something wrong within my CSS. Thanks again for any help you can supply.

  9. I also just can't seem to get the images, and text lined up the same in the gallery as the top thumbnails.

  10. Hi,

    For your missing menu bar item, you can add the following CSS:

    .navigation-main a {
        color: #000; /* Use your own color here */
    }

    (Previously the link item color was white, so they became invisible).

  11. I have now put 2 images on the gallery page as 'under testing' so you would know which I had done the custom link on.

    This helps a ton! Thanks for posting image examples. I thought about the best way to try to reproduce a gallery with individual images so you can link them to different pages, and I came up with an example that may work. Note that it requires that you edit the HTML. Let's walk through it…

    First, open the Text tab in the editor: http://en.support.wordpress.com/editors/#text-editor

    Then find the HTML at the bottom for your images. You'll want to wrap each one in a "div" tag with a specific class name so that we can then use that class in some CSS rules.

    <div class="design-item">
    *** your existing HTML here ***
    </div>

    So, here's what you have now:

    [caption id="attachment_2154" align="alignleft" width="122"]<a href="http://sunshineinyourday.wordpress.com/2014/03/02/on-my-work-desk-this-week-so-whatcha-doin/"><img class="wp-image-2154 size-thumbnail" src="http://sunshineinyourday.files.wordpress.com/2014/02/p4.jpg?w=122" alt="" width="122" height="150" /></a> So…whatcha doin'?[/caption]
    
    <a href="http://sunshineinyourday.wordpress.com/2014/02/20/on-my-work-desk-this-week-sending-you-sunshine/"><img class="size-thumbnail wp-image-2024" src="http://sunshineinyourday.files.wordpress.com/2014/02/sending-you-sunshine-card.jpg?w=112" alt="Sending You Sunshine!" width="112" height="150" /></a>
    
    <a href="http://sunshineinyourday.wordpress.com/2012/12/02/cut-print-thats-a-wrap-not-so-fast/"><img class="alignleft size-thumbnail wp-image-1470" style="float:left;outline-width:1px;outline-style:solid;outline-color:#777777;resize:none;" src="http://sunshineinyourday.files.wordpress.com/2012/12/dsc_1335.jpg?w=150" alt="Cut, print, that's a wrap!" width="150" height="100" /></a>

    And here's how that same HTML should look after the divs are added:

    <div class="design-item">
    [caption id="attachment_2154" align="alignleft" width="122"]<a href="http://sunshineinyourday.wordpress.com/2014/03/02/on-my-work-desk-this-week-so-whatcha-doin/"><img class="wp-image-2154 size-thumbnail" src="http://sunshineinyourday.files.wordpress.com/2014/02/p4.jpg?w=122" alt="" width="122" height="150" /></a> So…whatcha doin'?[/caption]
    </div>
    
    <div class="design-item">
    <a href="http://sunshineinyourday.wordpress.com/2014/02/20/on-my-work-desk-this-week-sending-you-sunshine/"><img class="size-thumbnail wp-image-2024" src="http://sunshineinyourday.files.wordpress.com/2014/02/sending-you-sunshine-card.jpg?w=112" alt="Sending You Sunshine!" width="112" height="150" /></a>
    </div>
    
    <div class="design-item">
    <a href="http://sunshineinyourday.wordpress.com/2012/12/02/cut-print-thats-a-wrap-not-so-fast/"><img class="alignleft size-thumbnail wp-image-1470" style="float:left;outline-width:1px;outline-style:solid;outline-color:#777777;resize:none;" src="http://sunshineinyourday.files.wordpress.com/2012/12/dsc_1335.jpg?w=150" alt="Cut, print, that's a wrap!" width="150" height="100" /></a>
    </div>

    Save changes and then go to the Appearance > Customize > CSS editor and add this:

    .design-item {
    	float: left;
    	height: 220px;
    	width: 33%;
    }

    If you have any trouble trying it out, let me know and I'll see what I can do to help!

  12. Thank you so much for your help. I appreciate the time this took for you to do for me. With your explanation you made it easy for me to understand what was taking place to make this change happen. It looks great! Is there a way for me to add the text under each picture? Or is that just not possible? I like the way it looks in the photo gallery above, but if not that is fine as well.

  13. Is there a way for me to add the text under each picture? Or is that just not possible?

    Totally possible! Here's a start:

    <div class="design-item">
    <a href="http://sunshineinyourday.wordpress.com/2014/03/02/on-my-work-desk-this-week-so-whatcha-doin/"><img class="alignleft wp-image-2154 size-thumbnail" src="http://sunshineinyourday.files.wordpress.com/2014/02/p4.jpg?w=122" alt="" width="122" height="150"></a>
    <p style="clear:both;">Add your text here.</p>
    </div>

    The style="clear:both;" part wouldn't be necessary if you set the alignment for the image to none, but either way works.

    You can add links or HTML or whatever to the text too.

    Note that the height for each "div" won't adjust automatically though. To keep those divs in a clean grid like they are now even after adding a bunch more divs, you have to set a height for them. In the CSS example from earlier, the height was set to 220px. If you add text below the images, you may need to adjust that 220px number. Just keep an eye on it and adjust the number if things start to overlap in funny ways.

  14. Thank you again, that seemed to work just great! If I change the font text to light grey, & make it smaller do I add the HTML to the <p style="" ?="" or="" on="" its="" own?<="" div=""></p>

  15. I must admit I am having trouble with the text. When I put in the image and text under it there is a box around the image and text, which doesn't look very good. But also when I place a second image, and text, it doesn't line up properly.

  16. I'm sorry for asking so many questions. Another issue I am having if you can look is after the images I have a short paragraph of text that should be at the bottom and now runs down the side of the images how can I fix this? If you are looking...I am just working at the bottom of the gallery page until I get all of the bugs worked out.

  17. …I also can't seem to get the images centred under the pink MY DESIGNS text.

  18. Another issue I am having if you can look is after the images I have a short paragraph of text that should be at the bottom and now runs down the side of the images how can I fix this?

    If I change the font text to light grey, & make it smaller

    To fix the first issue, find the specific <p> tag in the in the HTML editor and give it a unique id, so it will look like this:

    <p id="example-id">I hope your enjoyed my designs. I will be adding to this gallery as I create, so please check back often! Until next time,
       <a href="http://sunshineinyourday.files.wordpress.com/2014/04/updated-jessi-signature2.jpg"><img class="alignnone size-full wp-image-2290" src="http://sunshineinyourday.files.wordpress.com/2014/04/updated-jessi-signature2.jpg?w=640" alt="updated jessi signature"></a></p>

    Then, in your CSS add this (this will also deal with the color of the text beneath the images):

    #example-id {   /* use the id you gave the <p> here */
       clear: both;
       color: inherit;  /* these two lines will keep the text in this paragraph the way it is */
       font-size: inherit;
    }
    
    /* This will change the text under the images */
    
    p {
       color: #999;
       font-size: 1.2rem;
    }

    When I put in the image and text under it there is a box around the image and text... But also when I place a second image, and text, it doesn't line up properly.

    I'm not seeing this box, did you find a way to fix it yourself? And, to me it looks like things are lining up correctly.

    I also can't seem to get the images centred under the pink MY DESIGNS text.

    Again, it looks to me like the images are centered just about the same as they were in the gallery at the top.

  19. Thank you Joelymil. That seems to have worked great for most of my issues. However, my closing paragraph isn't in the grey colour that the thumbnail text is. Can you please tell me how to change that? Also, the thumbnails that I am working on (at the bottom) aren't the same size as the thumbnails in the gallery on top. I know this may seem picky but with the horizontal images, you can see them better with the sizing of the top images. Is there a way to change that as well?

  20. Apologies, I was under the impression you wanted the final paragraph to be a different size/color than the thumbnail text, as that's how it had been in the gallery above.

    To make it the same color as the thumbnail text, you can just remove the "color: inherit;" declaration from the code above. Same goes for the "font-size: inherit;" rule. With one or both of those removed, the "p" rule below will set the color/size of the final paragraph as well as the thumbnail text.

    As for the width of the horizontal images, I totally get what you're saying. I'll have to look into that a little further, though, so bear with me!

  21. Ah, it looks like, per designsimply's instructions, you're setting the width and height of each image manually, in the HTML editor.

    It looks like you currently have those horizontal images set at 128px wide - the same images in the gallery are 150px. So, in the HTML editor, just change the width property of your horizontal images to 150px and they should look the same!

  22. So I have now set my html to be 150px wide for each thumbnail, and each to be 175px in height. However, they still are different visually both in width and height.

  23. Thank you for your help joelymil, and designsimply. I have gone back in and changed my thumbnail images to be what the height should be, and not 175px. This seems to have fixed the problem I stated above. Do you think it is better to not change the height (just the width) when I add further to my gallery?

  24. Do you think it is better to not change the height (just the width) when I add further to my gallery?

    You can change the height, but since it's a bit manually setup, if you change the height for one, you'll have to also adjust the rest manually. Totally doable!

    You can make the text inside the divs on that page pink by adding this to your Appearance > Customize > CSS editor:

    .design-item p {
    	color: #f95ebd;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags