• Resolved sab478

    (@sab478)


    Hi. great theme and I’ve been enjoying customising it.

    Our website front page has 4 graphics in a table that are used as buttons to click through to other parts of the site. For some reason, there is a grey line across the top of these which I can’t get rid of. Have a look here: https://kingdomwaytrust.org/ Any ideas?

    Is it possible to change the black lines which you usually use for housing the social media icons? Ideally I’d like to make the bottom of the blue section into a wave. Is there an easy way to do this, which shows up on every page?

    There is also a grey thick line across the bottom of each page, above footer. Is it possible to remove this? I’d like to close up the space between content and footer.

    Thanks for any help you can give.

Viewing 11 replies - 1 through 11 (of 11 total)
  • you have a border-top: 1px solid #dddddd; on .table th, .table td coming from bootstrap (Line 577).

    Either remove that or add this to your own stylesheet

    .entry-content .table th, .entry-content .table td{
      border:none;
    }

    As for the thick gray line, that is an empty
    blockquote element. You might want to check that in your tinymce (edit post/page). It might have got added there.

    Thread Starter sab478

    (@sab478)

    Thanks Lemu. I’ve cured the table border by adding to my child style sheet so that’s great.

    The blockquote is a mystery to me. I don’t know where it is – it appears on every page. For the moment I’ve reduced it to zero in the css but that means I can never use blockquotes! It’s unlikely so that’s OK, but it would be nice to know where the coding is.

    I’ve also discovered the social line in the css so can eliminate it there (or reduce height as I have at the moment). I’d love to know how to change it to a wavy line though!

    Norm

    (@casualmagic)

    One way to change to a wavy line is with an image boarder.

    Here is a good post on understanding boarder images.
    https://css-tricks.com/understanding-border-image/

    For the lines in the social background bar, this could be done by adding a new custom style like:

    #st-socialbar-wrapper {
    	background-image:  none !important;
    }

    The !important part will force this style because this is coded directly into the header.php file for the background graphic. If you want to simply change it out for a different image, you can upload your new one to your child theme image folder, then create a new background-image style to use that. So you could do something like this:

    #st-socialbar-wrapper {
    	background-image:  none !important;
            background-image: url(path to your new image);
    }

    Another method would be to copy the header.php file into the child theme and make the edit there.

    Blockquote styling is found in the theme’s style.css around line 341 and begins with this:

    /* blockquotes group */

    Thread Starter sab478

    (@sab478)

    Thanks for the help so far, but I’m afraid after hours of trying I’m stuck! I have put a new banner-curve.png which is 1920x68px in my images folder, and have modified the header.php in my child theme as you suggested. I’ve set the social background to white and increased the height in the stlye.css to 68. The curve is a blue curve the same colour as the rest of the header. however, I can’t make it show up. I’ve also got a blue line at the bottom of the space where it is supposed to be, which needs to go! Any ideas what I’m doing wrong?

    Will this curve, once it’s showing, show on all pages? Anything else I need to change to ensure this happens?

    Also I’d like to move up the content on the front page (the 4 buttons) but when I inspect the page there is an extra “row” I don’t think I need but not sure where I can remove this. And the div.entry-content where the buttons are seems also quite padded, but not sure how to change that either. Can you help please?

    About the curve… in your source path to the image, you have it as:

    https://kingdomwaytrust.org/wp-content/themes/celestial-lite/images/banner-curve.png

    But you have the image in the wrong theme image folder. I had a hunch and did this link:

    https://kingdomwaytrust.org/wp-content/themes/celestial-lite-child/images/banner-curve.png

    Once I did the child theme one (because this is where you put it, the wave graphic shows up.

    The curve should show up on every page. I did notice borders showing, so some more tweaking needs to be done. For example, one of the styling options which is also in the parent theme’s style.css around line 126 is this:

    #st-banner0-wrapper {
    	max-height: 590px;
    	position: relative;
    	border-top: 1px solid #525458;
    	z-index: 1;
    }

    The border needs to be removed because this shows up below the wave curve.

    As for the spacing at the top part, there is an empty “st-cta-wrapper” container that takes up some space, and then I also noticed in your source code, you have just before your table (with your 4 circles) the following empty code that you will want to delete because these are adding space at the top too:

    <tl><p></p>
    </tl>
    <p><br>
    </p>

    By the way, I have to say I like where you are taking this because the theme is definitely looking different and has creativity to it, especially with the wave curve you added.

    Thread Starter sab478

    (@sab478)

    Thanks for your help. I feel like I’m making progress! The curve is now working. I’ll need to tweak the shape a bit to make it look better, but the principle is there. I guess it doesn’t shrink to fit the screen width, but just cuts off the right hand side does it? Any way of making it shrink to fit? And there is now a white line border at the top of the curve. I guess removing the border in the css as you suggested removes both top and bottom borders. Is there a cure for that?

    On the spacing it’s strange because when I go to edit the page in the text view in WP I have:

    <table>
    <tl>
    <td>
    <img class=”alignnone size-full wp-image-420″ alt=”AboutButton” src=”https://kingdomwaytrust.org/wp-content/uploads/2013/05/AboutButton.png&#8221; width=”250″ height=”250″ />
    </td>
    etc.

    So I don’t know where the added space you are seeing that you outlined in your reply is coming from. And how do I remove the empty “st-cta-wrapper” container? Sorry I’m a bit of a novice at this stuff, especially using WordPress. It’s good to learn new things though!

    Thanks again.

    So far looking great… to make the curve responsive, it won’t do it if it’s a background image. You would have to change the coding to be hard coded into the theme instead of being a background.

    As for that top light blue line…took me a while to find that colour in the source code but it doesn’t exist. However, I discovered it’s your wave graphic which has that line at the top which I’m guessing is the border you have on the graphic when you made it. You need to mask that top line part.

    If you want to remove the st-cta-wrapper, you will need to do that from the header.php file; an easier less messy method would be to add a new style to your child theme style.css as:

    #st-cta-wrapper {display: none; }

    As for a novice, you’re doing pretty good actually from what I can see.

    By the way… you might want to change this topic to resolved if the original topic and issue is solved. The moderators will probably request new topics per issue be posted separately.

    Thread Starter sab478

    (@sab478)

    Great help, thanks. I will open a new topic as suggested, for how to make the curve responsive. I’ll sort the line in the graphic later when I get a chance. Thanks for spotting that for me.

    I have made a new plugin after fetching rows from database and as i click on delete it shows an error message that you don’t have sufficient permissions to access this page and i have not taken any jquery so jquery can’t be conflicting.Please give me solution.

    @deepanshu….if you made your own plugin and you are experiencing the permissions error, then this will be related to your plugin and more likely not the theme. Also, because this topic is already set to “Solved”, please post it as a new topic but in one of the other forum categories that would relate to custom coding, plugins, etc.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Removing table line and page top and bottom lines’ is closed to new replies.