Figuring out how to customize Business Services and/or Studio

I copy and pasted one of my web sites into WordPress and fiddled with a theme I chose for the blog around a year ago. I have a public relations and web design business and also moving into app development. Triple play is what I'm calling it. I am coming over from using Dreamweaver. WordPress is supposed to make building dynamic web sites easier and is in more demand. What drives me crazy about WordPress is every CMS system has a drop down menu to change the font and size of text. Not WordPress. Why does one have to go into the HTML. to change this? Are non-techies doing that? I spent 3 hours on the home page yesterday. I wasn't liking the way it looked.

That rant out of the way , I decided to see if I could find a simpler theme and installed Business Services and Studio. In the Business Services, demo, I liked one page where there was a graphic with text wrapped around it, interesting color effect, rand another that had three images, "What we do" which would be good for my triple play. I went to Theme Options>Custom Styling and there was font, font color, button colors, hover. I filled this in, saved, noted the information in case I want to change and come back. When I went to Customize, none of the changes were there. When I went to the home page. nothing was reflected in Visual or in Preview Changes. Some other preview had some change. I am confused by all the previews and just navigating the customization. When I went to Instructions/support, there were instructions to download the theme and all this FTP, not where the theme file is.

Please help. Ideally if we could be on the phone or someone in the background showing me what to do. These are supposed to be simple themes.

Michael Kleiner

    Michael Bissett

    Hey @mkleiner, hope you're doing well this evening!

    We only provide support here through the forums, but I'll try to lay out things as best as I can here.

    In regard to the changes you made in:

    Appearance -> Custom Styling

    Did you make sure to select the default.css template from:

    Appearance -> Preset Style

    As that settings page mentions:

    If you want to customise the theme options you MUST have default.css selected

    Once you do that, you should see your changes being applied on the page.

    Hope this helps!

    Kind Regards,
    Michael

    P.S. As a bonus item, I'd like to touch on your earlier comment:

    What drives me crazy about WordPress is every CMS system has a drop down menu to change the font and size of text. Not WordPress. Why does one have to go into the HTML. to change this?

    You'll be glad to know that there's a plugin that'll give you the drop down menus that you desire, TinyMCE Advanced:

    https://wordpress.org/plugins/tinymce-advanced/

    You'll want to make sure to go to:

    Settings -> TinyMCE Advanced

    And add the "Font Family" & "Font Sizes" buttons into the Visual editor (you can find them in the "Unused Buttons" on that page). There's other buttons you can add to the Visual editor as well.

    mkleiner

    Michael B,
    Thank you for the Tiny MCE Advanced Plugin. I added a lot of the buttons. Generally working much better. I still want to know how I can change the colors in the navigation bar and upload my logo to the header? In addition, I would like to try the theme that has the three images on the home page, what we do in the demo, so I can put PR, Web, App. How do I get rid of the sidebar from the blog page off the regular pages?

    Michael Kleiner

    Predrag Dubajic

    Hey Michael,

    Hope you're doing well today

    WordPress tries to simplify things and for additional options there are number of plugins that can be use to extend the functionality. It also depends on the theme that you have decided to use, some come with the default options and just a few modifications available while other provide you with number of different options including page builders, shortcodes, sidebar selectors and more.

    To upload the logo you need to go to Media > Add New and upload image that you want to use as logo.
    When the image is uploaded you will see Edit link on the right side.
    Once in edit panel on the right side you will see File URL which you need to copy.
    Now go to Appearance > Theme Options > Branding and for the large image logo select Yes and in field below paste your image URL, the second selector for Square image logo needs to be set as No to show this image, you can have both set to yes.

    Navigation color needs to be changed by adding CSS code, you can use plugin like this one to add it.
    You can add this CSS code and change the HEX value for colors to adjust it, I have commented what color changes what:

    #navigation-inner,
    .sf-menu li a {
    	background: none;
    }
    
    #navigation {
    	background: #efefef; /*navigation background*/
    }
    
    .sf-menu .selected a, .sf-menu .current_page_item a {
    	background: #000000; /*active item background*/
    }
    
    .sf-menu li a:hover {
    	background: #2d2d2d; /*menu item hover*/
    }

    To remove the blog sidebar you will need to edit blog page template file which is located in your themes root directory, but I suggest using child theme for any theme files modifications.
    In template-blognews.php you will need to remove this part of code:

    <?php if( $bp_existed == 'true' ) { //check if bp existed ?>
    			<?php get_sidebar('bpblog'); ?>
    		<?php } else { // if not bp detected..let go normal ?>
    	<?php get_sidebar('blog'); ?>
    		<?php } ?>

    And add this code to CSS plugin:

    .page-template-template-blognews #content {
      width: 100%;
      border-left: none;
    }

    For the home page columns you can use shortcodes, there are number of plugins that support column shortcode. You can find some of them here:
    https://premium.wpmudev.org/blog/wordpress-shortcode-plugins-for-design/

    You can now create new page and add columns inside content and after that go to Settings > Reading select A static page option and select your page to show as home page.

    Hope this helps.

    Best regards,
    Predrag

    mkleiner

    Thank you for your reply. Re getting rid of sidebar, I found a drop down that offered full page width.

    I designed a larger image with the logo and was able to upload it to the header. Yes!

    I changed the navigation .css you sent and have the background I want. The text remained white, so I changed hover color to green, rather than the blue. This worked, but, if I can I would like to change the text to green to keep it consistent with my app and need to change the drop downs under Kleiner PR and Kleiner Sites (see screen shots in attachment) to be consistent with the navigation. And, I cannot find where to edit and/or look at the menu navigation names and drop downs. It's now in Appearance>Menus. You can create a new menu here, menu structure.
    There are

    I used the Shortcodes for the columns, but the third column is not aligning to the right. (see screenshot in attachment). I made the first column yes="left", second yes="center," and the third, yes="right". The first two are left and center, but the third is underneath the left column.

    Ash

    Hello @mkleiner

    These are your questions:

    1. I would prefer the text color to be the green, not white.
    2. How do I change the colors on the drop downs to be the grayish-silver background?
    3. How do I get rid of the sophie and me dangling? While this is a page, there doesn’t need to be a
    tab here.
    4. How do I change the blue color above the banner and below the navigation?
    5. Any chance of changing the text links so only the first letter is capitalized?

    1. Add the following:

    .sf-menu li a{
    color: green !important
    }

    2.

    .sf-menu li li, .sf-menu li li a:hover {
    background: #DBDBDB !important;
    }

    3. You can hide it:

    #main-header{
    display: none;
    }

    4. Above the banner:

    #top-header{
    background: url(LINK_TO_IMAGE);
    }

    Below the nav: (though it will be hidden if you use code from #3)

    #main-header{
    background: url(LINK_TO_IMAGE)
    }

    5.

    .sf-menu {
    text-transform: initial !important;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Hope it helps Please feel free to ask more question if you have.

    Cheers
    Ash

    mkleiner

    Thank you for the reply. It has been real helpful to have this resource. If I can work out these items, I think the rest will start to fall into place. Re 3, once I found the right navigation menu, I was able to delete that tab.

    I still have the question about the columns. The screen shots were in the same previous attachment. The right column is aligning under the left. I had yes="left", yes="center" and yes="right." That worked with the first two columns.

    mkleiner

    Hi,
    Most of the .css tags above worked! Yes! Still have a couple of issues and screen shots are attached. When I started putting in those tags, I had a green, I guess, background hover. Now, it's blue, even though I have removed blue from the CSS Stylesheet Editor and Custom Styles. Maybe, there is a conflict between the two. I would like the green color or to just have the text link white, like in the drop down. I tried to change the color above the banner, but it didn't work. Not sure whether to put the url inside or outside parentheses. I created an image the size of the banner and made it color #DBDBDB.

    mkleiner

    Hi,
    I made progress on the content of the home page today, but still have some problems -- as well as the above. The third column is aligning in the left and I think if that gets fixed, the other issues on the page may follow. There is a gap in the second column before a display quote. There are no spacing in Visual Editor or HTML. There are a few other things. Everything is detailed in the attached screen shots, which include the Visual Editor and HTML. Thank you.

    Predrag Dubajic

    Hi @mkleiner,

    Thank you for you patience on this.

    Can you try adding this CSS code, this should remove the blue background on menu items hover:

    .sf-menu li:hover,
    .sf-menu li a:hover {
    	background: none !important;
    }

    To change only the blue part of the header background you will need to edit image attached below.
    Use photoshop or similar software to change the blue color.
    After changes upload the file in your media and use this CSS code, just change to the correct path to image:

    #top-header {
      background: url(IMAGE_URL);
    }

    As for the centered column issue, it seems that the float: none attribute is causing the issue so here is the CSS code you can try:

    #post-288 .su-column-centered {
    	float: left!important;
    }

    Note that I pointed this CSS to only work on this particular page just in case that changing the column attribute doesn't mess up something else, so if you want to apply this to entire site replace the #post-288 part with body

    Let me know if you need more help with this.

    Best regards,
    Predrag

    mkleiner

    Predrag,
    Thank you so much for replying. I was going to follow up again today. I will try the suggestions. While waiting, I continued working on the other pages and updating the content. The home page is the only one I'm using the three columns. There was a drop down which offered me the choice of full width so I used that.
    For the columns, do I need to do the same code for all three columns or just the right one? I also need to delete the reply areas a the bottom of the pages until the blog page.

    mkleiner

    The code to get rid of the blue background worked.

    The header, I had done that css tag before and did again.
    }

    #top-header {
    background: url: (http://blogspot.kleinerprweb.com/wp-content/uploads/2015/01/headerdbdbdb.jpg);
    }
    The header didn't change (see attached).

    As for the columns, the left column is for Public Relations, center Web Sites, and third column, Mobile Apps. Mobile Apps is the one that is stuck in the left column (see attached). I changed the float tag in your .css to right, but it didn't work. I tried putting it into the shortcode and thaat didn't work. Don't know if I have to do the tag for each column.
    #post-288 .su-column-centered {
    float: right;
    }

    mkleiner

    I sent a follow-up to the latest suggestions last Monday 2/9 and was checking back to see why there hadn't been a reply and don't see my post here. I am reattaching the screen shots I sent and they have the questions on them. I had to look at them again to remember.

    The header color disappeared, but was not replaced with new color, but I'm thinking of leaving as it is now.

    Still having problems with the third column. I was wondering, one of the features of the Business Services theme is the three columns. Is there another way to create that without using the short codes?

    Thank you. Not far from being done.

    Michael

    mkleiner

    I went back in the support notes and found the css code to restore the customization of the navigation. Very briefly, the code to only have first letter in caps, worked. I am attaching the screen shots. Would it help to upload one of the recent database backups? Why would it revert back to the default colors when I didn't do anything, and now, the code that made it work isn't working.

    I want the navigation background to be #dbdbdb, text #33CC66, hover #ffffff. The blue across the top removed and below the navigation if possible. And the previous questions.

    Thank you.

    Michael

    Tyler Postle

    Hey Michael,

    Hope you're doing well today!

    The colors have gone back to the default, the navigation, header, cap letters navigation. Why would it do that?

    Where did you add in the custom CSS? To a plugin such as the one Predrag mentioned above? http://wordpress.org/plugins/my-custom-css/

    We recently pushed out an update for the Business theme, so if your custom styles were inside the theme folder itself then they would of got overwritten, make sure your CSS changes are always in the child theme folder or plugin like My Custom CSS.

    I want the navigation background to be #dbdbdb, text #33CC66, hover #ffffff. The blue across the top removed and below the navigation if possible. And the previous questions.

    Try adding this:

    #navigation {
    background: #dbdbdb !important;
    }
    
    #navigation .sf-menu li a {
    background: none;
    color: #33CC66;
    }
    
    #navigation .sf-menu li a:hover {
    background: none;
    color: #ffffff;
    }
    
    #navigation .sf-menu li a:active {
    background: none;
    }
    
    #top-header, #main-header {
    background: #fff !important;
    }

    I'm unable to open the pdf you have attached. You mentioned it denied your previous file attachments? What kind of files were they? You should be able to attach images without any issues

    Look forward to hearing back!

    All the best,
    Tyler

    mkleiner

    Thank you for the reply. I had entered the css in Appearance>Editor. I downloaded the My Custom CSS plug-in and inserted the codes you provided. Your code brought back the #dbdbdb background on navigation and green text and header disappeared. ? As you can see on the attached (hopefully), still have a blue hover and background on drop downs and a sliver of blue above Contact. Not sure whether to keep the gray under the navigation with the gap in between. Any thoughts?

    Also in the attachment are the issues from last week, the ongoing problem with the third column staying in the left of the page. I used shortcodes to create the columns. Is there a feature in Business Services that will create the columns since this is included in the demo? I also have a number of other questions that I include in the attachments. They are saved as docx and pdf. I couldn't open the .pdf from yesterday here, but was able to from my computer. The others have gone through.