New Topic

Help with Header, Child theming, images

Home › Forum › Customization › Help with Header, Child theming, images

This topic contains 22 replies, has 2 voices, and was last updated by  StartupWP 3 years ago.

Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #2169

    Dick Ash
    Participant

    I’m a real newbie trying to build a simple business site for our new dog training business. The address is: http://www.blessedfurever.com/
    I’m using StartUpPro & StartUpProChild.
    I’ve read the child theming writeup. Previously I was able to put the logo on the left with a title using child theming. I put
    <a href="http://blessedfurever.com/"><img src="http://blessedfurever.com/wp-content/uploads/2015/03/Screen-Shot-2013-10-08.png" alt="Blessed Furever Dog Training" /></a>
    without tags that’s a href=”http://blessedfurever.com/” img src=”http://blessedfurever.com/wp-content/uploads/2015/03/Screen-Shot-2013-10-08.png” alt=”Blessed Furever Dog Training”
    AND
    #logo-icon{height:1038px;margin-right:10px;float:left}
    in the style.css file and it worked.
    This time when I put those lines in, the whole design got screwed up. The menu didn’t work, the facebook icon grew in size.
    After I get that, I will also want to put some images in with the text. I also need to remove the ‘Leave A Reply’ and box below it. I will also want to make the menu look like individual buttons, not a solid bar.

    The basic look I’m going for is like this site: http://www.dogsamongus.com

    I hope I’m not asking for too much. My wife is really leaning on me to get this done…..(help!!)

    Thanks so much in advance.

    #2170

    StartupWP
    Keymaster

    1. For the header/logo/title. What might be a better solution is to just upload the logo through your StartupPro Options and add “Dogs are Gifts; Well Behaved Dogs are Blessings” for the description under Settings > General. From here it would be easier to then style things to look more the way you want.

    2. For hiding the reply box see https://startupwp.com/topic/removing-comments-from-pages-and-posts/.

    3. Here’s how we can break up the menu tabs:

    #menu {
      background-color: transparent;
      background-image: none;
    }
    
    #menu ul li a {
      background: #000;
      border-right: 0 none;
      margin-right: 5px;
    }
    #2171

    Dick Ash
    Participant

    Thank you so very much. I think I’ve implemented the changes, except for part of #1.

    How do I style the ‘All Dogs are GIfts…’ text so it’s larger and over to the right? In conjunction with that I’d like the phone number, email and facebook and twitter icons to be a little larger and below the ‘All Dogs…’ text.

    If I may, I have some more questions….
    2. How do I make the menu buttons rounded? I found this in another forum answer but I apparently didn’t put it in the right place or integrate it into my existing menu code:
    #menu, #container {
    border-radius: 10px;
    }

    3. How can I put a border around the main text content on each page? To reference the http://dogsamongus.com/ page again, see how they have a darker yellow background, then a white area and then a box with the ‘The WIsh’ header and text that has a border and slightly lighter yellow background? That’s the look I want

    4. In the footer area of each page I would like the look from the bottoms of the http://dogsamongus.com pages. We’ll the logo like the lower left one they have (APDT) and one other for Karen Pryor Academy. We could also repeat the social icons there like they did. Then in the very bottom area I’d like to do what they did with our business logo again, the site map (which I generated using the Menu Site Map widget from the WP Site Mapping PlugIn), a header and text links for facebook and twitter, a header and text for ‘Areas served’, and then the copyright notice.(which obviously needs help getting the shortcodes right.

    I appreciate any and all help and I’m sorry if I’m asking for too much of it. I tried to find answers in existing questions before asking things, and I did find and use some things myself.

    I really wanted to try to do this website and I don’t mean to be such an idiot about some things. I have a 37 year old Computer Science degree and worked with Oracle databases of navigation data during my career for the Corps of Engineers but never got into the web stuff at all. I feel like an intern all over again.

    We’re in West Virginia and the Dogs Among Us business is in NY. If they ever happen to see our page I hope they understand that imitation is the sincerest form of flattery :). Their page was an example in a Web Content course I took from the Assoc. of Professional Dog Trainers and I think the businesses whose websites were shown understand they’ll be imitated because they’re good.

    Thanks again for your help. I’m impressed with StartUp themes and the way you support them.

    #2172

    Dick Ash
    Participant

    I got #2 all by myself! I changed the shape of the buttons but when they were hovered over they went back to square corners. I fixed that and I also managed to change the color of the buttons. When I put the code in the wrong place, I managed to make the corners of the white area around the text rounded and my wife liked it and said to keep them that way.

    Also, can you tell my wife likes purple??? :)

    #2173

    StartupWP
    Keymaster

    1. Use:

    #logo {
      float: left;
      width: 40%;
    }
    
    #site-description {
      clear: none;
      color: #fff;
      float: left;
      font-size: 25px;
      width: 60%;
    }
    
    #social .details, #social .details a {
      color: #fff;
      font-size: 18px;
    }

    You’ll also need to copy over your header.php file to your child theme if you haven’t already and find:

    <?php
    if ( $options['social'] ) {
    echo '<div id="social">';
    if ( $options['googleurl']!="" )
    echo '<a href="' . esc_url( $options['googleurl'] ) . '" id="social-google"><img src="' . get_template_directory_uri() . '/images/social/google.png" alt="Google+" /></a>';
    if ( $options['linkedinurl']!="" )
    echo '<a href="' . esc_url( $options['linkedinurl'] ) . '" id="social-linkedin"><img src="' . get_template_directory_uri() . '/images/social/linkedin.png" alt="LinkedIn" /></a>';
    if ( $options['twitterurl']!="" )
    echo '<a href="' . esc_url( $options['twitterurl'] ) . '" id="social-twitter"><img src="' . get_template_directory_uri() . '/images/social/twitter.png" alt="Twitter" /></a>';
    if ( $options['facebookurl']!="" )
    echo '<a href="' . esc_url( $options['facebookurl'] ) . '" id="social-facebook"><img src="' . get_template_directory_uri() . '/images/social/facebook.png" alt="Facebook" /></a>';
    echo '' . do_shortcode( stripslashes( wp_kses_post( $options['custicons'] ) ) ) . '';
    echo '</div>'; }
    ?>

    and move it just below:

    <?php if ( $options['description'] ) { echo '<div id="site-description">' . esc_html( get_bloginfo( 'description' ) ) . '</div>'; } ?>

    2. Great to hear.

    3. Use:

    #container {
      border: 2px solid #9400d3;
      box-shadow: 0 0 10px #777;
      box-sizing: border-box;
    }

    4. Use:

    #copyright {
      color: #fff;
      font-size: 16px;
      padding: 2%;
      text-align: center;
      text-shadow: none;
    }
    
    #footer-sidebar {
      background: #9400d3;
      border-radius: 10px;
      padding: 2%;
    }
    
    #footer-sidebar * {
      color: #fff !important;
    }

    No need to feel stupid, it’s really no different than learning a new language. Daunting it may be at first sure, but you seem to be catching on quick and the more you see examples and fuss around with styling your site the more things will begin to actually make sense as apposed to simply remembering that if you do X, Y will happen.

    #2174

    Dick Ash
    Participant

    I’m not using a child theme. I started to but since you said it was easier to do what you suggested in my original question #1, I thought you meant easier than using the child theme.

    #2175

    Dick Ash
    Participant

    I apparently didn’t explain #3 very well. I’d like a long white box with colored boxes inside them with text.

    For example on the About Us page, I’d like a long white area. Inside that I’d like to have a light purple box with the text from ‘Robin Belcher Ash’ through the paragraph that begins with ‘When not training’. Then under that another light purple box with the text from ‘Hi! I’m Angel’ thru the paragraph that starts with ‘My favorite thing’. I’ll want to add a third light purple box in between that has my bio info in it.

    There’s a lot of space to the right of the text on this page. What would I need to do to put another box of text or pictures or other stuff to the right of the text I have now? LIke on the home and about us pages of http://dogsamongus.com?

    Thanks again for your help.

    #2176

    StartupWP
    Keymaster

    It is easier and recommended to just use the theme options up until the point where it’s required to use a child theme based on requests. For #1, it’ll be necessary to use a child theme for this part:

    …I’d like the phone number, email and facebook and twitter icons to be a little larger and below the ‘All Dogs…’ text.

    If that bit is not extremely important and can be compromised you can avoid needing a child theme.

    3. Is this what you had in mind?:

    .entry-content p {
      background: #cab1e2;
      border-radius: 5px;
      font-family: Aclonica;
      font-size: 16px;
      padding: 2%;
    }

    Looking at http://www.blessedfurever.com/?page_id=80, there are two things we can do here to fill out the page:

    a. Edit the page and change the page template the no sidebar template.

    or

    b. Under Appearance > Widgets add some widgets to the sidebar area.

    Bonus: Go to Settings > Reading and select “Post name” and save. http://www.blessedfurever.com/?page_id=80 will now appear much more nicely as http://www.blessedfurever.com/about-us/.

    #2177

    Dick Ash
    Participant

    OK. I activated the StartPro Child Theme. I copied the header.php and style.css files from StartPro to StartProChild.

    On the editor screen I see the message: This theme is broken. Template is missing.

    Remaining style issues:
    1. Header: The facebook and twitter icons are huge. I want them normal sized and with the phone/email line at the right side of the header. I also want the phone number to be larger and darker (bold) but I can’t find how to style it.
    I also haven’t been able to style the ‘All dogs are Gifts’ text. I want it to be larger and a different font. I’d like to be able to break it with ‘All Dogs are GIfts’ on one line and ‘Well-Behaved Dogs are Blessings’ below it without the semi-colon.

    My wife wanted some sort of curved text for the ‘All dogs are Gifts text’ I searched for a plugin that would do that and couldn’t find it. I assume to get that we’d have to make it in some other software, save it as an image file and display it in the header.

    2. Menu – somehow it’s changed to a drop down menu instead of having buttons arranged horizontally.

    3. Page Confent: The purple boxes inside the white look good except I don’t want a new purple box for every paragraph.
    On the About Us Page I just want three purple boxes inside the white area.
    I want one with the picture of Robin and the text from ‘Robin Belcher Ash’ through the paragraph beginning with ‘When not training’.
    Then a new purple box with my picture and the text from ‘Dick Ash’ through and their Therapy Dog Visits.
    And a new purple box with the text starting with ‘Hi! I’m Angel’ through the paragraph starting with ‘My favorite thing’.

    4. In the dark purple box at the bottom, the site map has disappeared.
    How do I add other content, like text links to our facebook & twitter, the APDT and other logos, etc.? I also want the copyright there and not between the content text and the footer?

    5. URL’s. The page names are now appearing instead of p=80. That change was on the Settings->Permalink screen, not Reading.
    However, the URL’s now contain ‘home-2’. Such as http://www.blessedfurever.com/home-2/private-training/. How do I get rid of the home-2?

    Thanks again for your help.

    #2178

    Dick Ash
    Participant

    1. I got the facebook and twitter icons back to a normal size. I still can’t get the site-description styled or the phone number/email styled and placed correctly.
    2. I fixed the menu back to horizontal.
    3. I’d still like to know how to do what I asked about above, but we’ll go with the white box without the purple boxes inside.
    4. I got the site map back, but I’d like to put more in the bottom box.
    5. Still need to fix the URL’s.

    Thanks!!

    #2179

    StartupWP
    Keymaster

    Please see https://startupwp.com/topic/child-theming/.

    1. Looks like you were able to solve the description style.

    2. Great.

    3. In that case let’s do this:

    a. Add this CSS:

    .purple-box {
      background: #cab1e2;
      padding: 2%;
    }

    b. Then in the page content you’ll need to switch the editor to HTML/Text mode and wrap the 3 areas with the following HTML:

    <div class="purple-box">
    
    </div>

    4. The same place you added that widget under Appearance > Widgets, you can add more widgets there.

    5. This happens when you create multiple drafts. For instance, you likely created multiple “Home” pages and some are probably in the trash. Make sure to delete them all out except for the live “Home” page. Then edit that page and you’ll see the field where you can edit the slug (is what it’s called) and remove -2 and save.

    You’re welcome.

    #2197

    Dick Ash
    Participant

    I’ve been away from this for a while, and I’m very confused…
    1. When I go to Appearance, then Editor I see: This theme is broken. The parent theme is missing. Please install the “StartupPro” parent theme.
    But when I go to Themes I see that StartupPro is installed. On Themes Under Broken Themes it says:
    StartupPro Template is missing
    StartupProChild The parent theme is missing. Please install the “StartupPro” parent theme

    I’ve read https://startupwp.com/topic/child-theming/. but I have no idea how I’m supposed to use that info to fix my problem.

    2. I’d like to change the template of one or more pages so I can have a sidebar area, but some pages don’t have a dropdown to allow me to change the template.

    3. I got an email from bluehost about SEO that says things like:

    Use Targeted Keyword Phrases. To land near the top of Google’s search results, you need to get granular in your metadata (which is how the engine tracks your site). The meta title is the blue headline in your search results, the meta description is the grey text below it. Make sure both of them (and your URL) have the same keyword phrase.

    How do I do this?

    In a related question, when I get my site to show up in a Google Search, it looks like this:
    Private Training
    http://www.blessedfurever.com/
    HOME. WHY CLICKER AND POSITIVE REINFORCEMENT DOG TRAINING? Blessed Furever Dog Training LLC is owned and operated by a certified….

    Why does ‘Private Training’ show up as the title instead of ‘Blessed Furever Dog Training Huntington WV’? How can I change this?

    #2198

    StartupWP
    Keymaster

    1. Go ahead and email us your login details so that we can get in and take a look:

    https://startupwp.com/contact/

    2. Depends on what kind of pages you mean. Are you referring to WordPress Pages (https://support.wordpress.com/post-vs-page/) or web pages in general?

    3. Install https://wordpress.org/plugins/all-in-one-seo-pack/, it’ll automate most of this for you.

    4. Referring back to 3 optimizing your SEO will allow you to take some control over your appearance in search engines. Joining https://www.google.com/webmasters/ will help additionally, but ultimately Google will decide the best appearance for your pages in its index. Please note that when you make updates Google will not automatically show the changes. It can take about a week.

    #2202

    Dick Ash
    Participant

    Done. Sorry – didn’t get on here yesterday.

    #2203

    Dick Ash
    Participant

    And for #2 above, I want to add an area for a another box with text to the right in my . I thought I could change the template to one with a sidebar but I don’t see a dropdown to pick another template from the no sidebar one that it currently has.

    I installed that plugin and am reading about it. I got email from bluehost about design and seo help. Actually we’re paying a little extra for seo help so I’m going to talk with them to see what they’re supposed to provide for that service we’re paying for.

    Thanks again. My wife is on my back about getting this done.

    #2204

    StartupWP
    Keymaster

    1. The problem is that you copied over the entire main stylesheet as the child theme stylesheet. style.css and functions.php are the exception to the rule, you want to do this for all files, but them as these files don’t replace the parent file, they add to it.

    So, in the case for the child theme stylesheet it need only contain:

    /*
    Theme Name: StartupPro Child
    Template: startuppro
    */
    
    @import url("../startuppro/style.css");
    
    START ADDITIONAL CSS BY REPLACING THIS LINE

    2. Can you share a link to the exact page you’re referring to?

    #2205

    Dick Ash
    Participant

    That’s just great – I replaced the contents of the child style.css with what you gave me above and now several things that were fixed are back like I don’t want them, so I need to fix them again.

    So do the fixes go in the parent style.css or the child.style.css?

    2. All of the pages now have a template drop down that wasn’t there before I did your fix to the child style.css file. That must have fixed that.

    #2206

    StartupWP
    Keymaster

    The parent stylesheet should always remain untouched. That’s correct, you need to move your added customizations over from the parent to the child stylesheet starting on this line as indicated above:

    START ADDITIONAL CSS BY REPLACING THIS LINE

    2. Yes, that’s correct. Once the parent theme is called correctly everything should function as normal.

    #2219

    Dick Ash
    Participant

    More questions…..several little things……thanks in advance…..
    1. How can I get rid of ‘HOME’, ‘About Us’, ‘Classes’ in the white area of each page? I don’t think I need those since they’re in the tabs now.

    2. Why is there such a big gap of lines between paragraphs on the home page? How can I get rid of some of that space? The same problem exists on the About us page.

    3. In the sidebar area of the home page, how can I change the font of the text?, Also, how do I get the corners of the purple box rounded like the main text box has?

    4. Speaking of the sidebar, if I wanted to use that template on another page how do I get an empty sidebar to work with? When I set the page_template of another page from ‘Sidebar none’ to ‘Default template’, the text of ‘Why Blessed Furever’ appears in the sidebar on that page also.

    5. I’d like to change the background color of the purple box with the text to a lighter shade. How do I do that? What is #cable2 in the background field?

    6. When I’m using the Appearance editor to edit a page, In the dropdown labeled ‘Select Theme to Edit’ the list of values has StartupPro listed twice – as the top and bottom values. If I choose the top value, there’s only a style.css and a header.php file. If I choose the bottom StartupPro, there’s a big list of files. I probably did something wrong with the themes to cause that. How do I get rid of the extra one? There’s also a ‘Startup’ value that I assume would go away if I deleted Startup from the Appearance…Themes page. Also on that page, below the list of installed themes under Broken Themes there’s an entry for StartupPro with Template is missing.

    Thanks again!!

    #2220

    StartupWP
    Keymaster

    1. Under Appearance > Widgets, remove/delete that widget from the Footer Sidebar.

    2. Update:

    .entry-content p {
      background: none repeat scroll 0 0 #cab1e2;
      border-radius: 5px;
      font-family: Aclonica;
      font-size: 16px;
      padding: 2%;
    }

    to:

    .entry-content p {
      background: none repeat scroll 0 0 #cab1e2;
      border-radius: 5px;
      font-family: Aclonica;
      font-size: 16px;
      margin: 0;
      padding: 2%;
    }

    3. Update:

    .purple-box {
      background: #cab1e2;
      padding: 2%;
    }

    to:

    .purple-box {
      background: #cab1e2;
      border-radius: 10px;
      font-family: verdana,sans-serif;
      padding: 2%;
    }

    4. Use an empty Text widget from under Appearance > Widgets.

    5. #cab1e2 is a hexadecimal color code. You can select others easily with this tool:

    http://www.w3schools.com/tags/ref_colorpicker.asp

    6. The extra one is likely your child theme. We recommend including the word “Child” in this theme’s name to avoid confusion.

    You’re welcome.

    #2661

    Dick Ash
    Participant

    I’m back with some questions and to make sure I haven’t screwed something up….

    1. The tagline (site-description) is too small in the desktop view (IE 11) and way too big on my phone (Android Chrome). On the phone it almost takes up the entire screen. Text too big. It’s Android 5.0.0, Chrome 47.0.2526.83. On the desktop view it was a bit too big and I tried to make it smaller but got it way too small and I can’t get it any bigger now.

    2. I’ve added pages and since the search box is at the end of the line where the menu is, it’s causing the menu to wrap around. I’d like the search box up above the social media icons with the phone number (which I’d like darker and bolder) )” /> and email address hyperlink where they are. That way the menu hopefully won’t wrap around. If it still needs to wrap, I’d like it to look better. Currently the first menu box in the second row doesn’t line up with the first box in the first row and there could be a little space between the rows.

    #2663

    Dick Ash
    Participant

    Here’s a link to the phone screenshot I tried to link above.

    Link

    #2717

    StartupWP
    Keymaster

    Apologies for the huge gap in support. Support will now continue again on a daily basis. If you’re still here with us and are having this problem, let us know.

    Thank you.

Viewing 23 posts - 1 through 23 (of 23 total)

You must be logged in to reply to this topic.