Home › Forum › Customization › Help with Header, Child theming, images
Tagged: child-theme, footer, header, images, menu
This topic contains 22 replies, has 2 voices, and was last updated by StartupWP 3 years ago.
- AuthorPosts
- March 13, 2015 at 11:37 AM #2169
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.
March 13, 2015 at 4:51 PM #21701. 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; }
March 14, 2015 at 12:30 PM #2171Thank 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.
March 14, 2015 at 7:31 PM #2172I 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??? :)
March 15, 2015 at 5:25 AM #21731. 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.
March 15, 2015 at 12:56 PM #2174I’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.
March 15, 2015 at 2:47 PM #2175I 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.
March 16, 2015 at 4:45 AM #2176It 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/.
March 16, 2015 at 8:39 AM #2177OK. 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.
March 16, 2015 at 4:36 PM #21781. 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!!
March 17, 2015 at 6:39 AM #2179Please 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.
March 30, 2015 at 8:08 PM #2197I’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 themeI’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?
March 31, 2015 at 7:48 AM #21981. 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.
April 2, 2015 at 6:48 PM #2202Done. Sorry – didn’t get on here yesterday.
April 3, 2015 at 5:09 AM #2203And 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.
April 4, 2015 at 9:34 AM #22041. 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?
April 4, 2015 at 6:56 PM #2205That’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.
April 5, 2015 at 8:56 AM #2206The 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.
April 15, 2015 at 1:31 PM #2219More 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!!
April 15, 2015 at 9:26 PM #22201. 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.
January 22, 2016 at 1:54 PM #2661I’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. . 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.
January 22, 2016 at 2:02 PM #2663February 29, 2016 at 5:23 PM #2717Apologies 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.
- AuthorPosts
You must be logged in to reply to this topic.