SideKick Dan

Hey Jan,

sorry if i offended you, not my intent by any means. You guys do a lot of hard work for people here for not charge. which is highly valued! ??

However, the answer i shared with the css applied to both buggy and matthew since they’re both using the same duena template. ( i checked the header of buggy’s site to double check he was using the same template as matthew) hence why i thought they’d both appreciate it. I can repaste the code in for Matthew, but if you can pop the post back that had the answer that would be helpful since i don’t keep record of the exact code. I’ll have to go back in and redo suggestion for the answer again.

Best Regards,
Danny ??

Glad it worked! ?? Let me know if it causes any weird display issues when you size the screen down and up. you can check your pages using this nice online tool i like to use for checking mobile responsiveness

https://quirktools.com/screenfly/

Best Regards,
Danny ??

btw, yogi bear was my favorite ?? lol

Try these things ?? After the bigger issue is fixed you should be able to toy more reliabley with the exaxt needs you have ??

Find the line in your html template to manually edit this

<div class="navbar-wrapper clearfix span9">

and change it to this

<div class="navbar-wrapper clearfix container">

And in this

.navbar-wrapper .navbar.notresp.row-fluid {
float: none;
width: 90%;
margin: 0 auto;
}

Delete the width completly that says 90%

In this

.navbar .nav {
float: none;
width: 100%;
text-align: center;
}

Get rid of text-align:center

Add this

.social-block {
display: none !important;
}
.navbar .nav {
float: left !important;
}

Danny :

the issue you’re going to have is that the width of the main page and all interior widget and page areas are set using media queries. You can change the main page width, but a span12 width at full screen width is still going to want to resolve to the same width. It will require a little customization. You can try to open the child templates bootstrap responsive css file and edit the .container class width from 1170px down to what you want that is bracketed within the @media (min-width:1200px) media query area. similar to below. Alternatively you can insert the following code to your custom css file and change the pixel width to suit your taste.

@media (min-width: 1200px) {

.container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px !important;
  }
}

The problem you might have is that at full screen width some elements/widget areas within the page might stay wide. To fix these you’ll need to edit the .span# classes to fit within the new narrower container you set. Then you may have to edit the .span classes widths across the board until you fix it. These samples are if you just override the bootstrap respnsive css in your custom css and not change the core files. If you change the core files you can but there’s no need for the !important statements.

@media (min-width: 1200px) {

.container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px !important;
  }

.span12 {
    width: 1170px !important;
  }
  .span11 {
    width: 1070px !important;
  }
  .span10 {
    width: 970px !important;
  }
  .span9 {
    width: 870px !important;
  }

...so on and so forth.

}

You might also need to set the next media query down in size too from

@media (min-width: 768px) and (max-width: 979px) {

to

@media (min-width: 768px) and (max-width: 800px) {

in the core files.

It’s a bit more advanced, so the desire to have a different width has to be strong and for a good reason to bother. In all honesty it shouldn’t matter much. Wider width gives you more room for white space which helps people actually see page elements easier and faster with greater conversion rates as in modern ux ui design.

It could be that by adding the first piece of code at the top, you don’t have any issues. Experimentation sometimes is required. I tried to find a file already customized on the internet to pop in but couldn’t

Best REgards,
Danny ??

Thanks for the quick response. Totally understand. In all honesty, between these kinds of forums and youtube I’ve learned all I have without any formal training ?? So I appreciate their intrinsic value in this regards and wouldn’t want to detract from that ??

Thanks again ??

Danny

Hey WPyogi,

Noted! Thanks ?? Quick question, would it be occasionaly ok to encourage people who sound like they need more involved help to think about possibly posting to the jobs section? Your suggestions are much appreciated ??

Best Regards,
Danny ??

Hello modelli!

There’s a lot of themes that that don’t quite make a full or great implementation of responsive design yet. Sometimes it’s a good idea to play with the demo site a lot by resizing the browser before settling on one and having someone skilled modify the looks via css. In your case, one thing you can do right away to help with that homepage image is add the following code to your custom css file or plugin. If the first doesn’t work try the second. Keep me posted and let me know if there’s anything more i can do. My info can be found by clicking on my avatar photo ?? Best Regards,
Danny ??

img {
max-width: 100%;
height: auto;
}

img {
max-width: 100% !important;
height: auto;
}

Hello,

If that’s the case you should be able to do something like the following and place it in your custom css file and it should override the one you see in dev tools.

body.custom-background {
background-image: none !important;
}

Best Regards,
Danny

Hey Tomas,

On the icons, it looks like they’re pulled in via css as small images. The css seems to indicate that they have the following file names. You’d have to locate them in the template files, then upload exact replacements in the color of your choice from what i can see. Without being able to root around in the files to look for them I can’t really give you a location. As a reminder, you might do all changes in a custom css file or child theme. Oh, almost forgot, if you wanted to upload your own images the exact same size anywhere in your child theme, you could modify the css code after to just set new file locations for the same icons. but it might be easier just to upload new images by the same names and in the same locations.

Keep me posted and let me know if there’s anything more I can help with! Tell your friends. My info can be found in the profile by clicking my gravatar image ?? [Moderator note: Please continue to keep all support on these forums]

Bubble Comments f087
Person Outline f007

Here is some code for the links ??

/* Body Links All Links */

a {
color: #005081 !important;
}
a:hover {
color: #cccccc !important;
}

/* Post Footer Tag Links */

.post-footer a {
background: #005081 !important;
border: 1px solid #005081 !important;
color: #ffffff !important;
}

.post-footer a:hover {
background: #000000 !important;
border: 1px solid #000000 !important;
color: #ffffff !important;
}

/* Search Title */

.screen-reader-text {
color: #005081 !important;
}

Hello,

Here is some css code to add to a custom css file or plugin. it should work. tested in firebug. with colors, sometimes you start by seeing if the element you are interested has a color defined for it. lots of times though, the color it has is inherited from an element higher up the chain, in your case the paragraphs do not have a color defined, but they inherit the color from the “body” class itself. You can just change it here, or if you want specifically add a class for the paragraph color. Also, sometimes finding the location of css can get tricky especially when one is dealing with multiple css files, child themes, priority issues, etc etc. I sometimes just get to the issue quicker and can keep my css customizations in one place by using a custom css plugin or adding css to the style.css file and adding the !important declaration at the end of a rule to tell the browser to override any other css for the same element.

Let me know if it helps. Let me know if you need any more hands on help with the theme. However, one suggestion i would have is go with a theme that is just nicer in how it was built. there are a lot of free templates that are just lousy, but a lot that are great. Usually you can swing a nice template to look however you’d like and you start with something that is less troublesome ??

Danny

body {
text-shadow: none !important;
color: #000000 !important;
}

/* title colors */

.entry-title, .entry-title a {
color: #ffffff !important;
}
.entry-title a:hover {
color: #cccccc !important;
}

And a suggestion would be to add a background image or color to the page div to make the text easier to read.

#page {
background: #ffffff !important;
}

Awesome! Glad to see it worked ??

Let me know if you ever need more hands on help in the future!

Best regards,
Danny ??

Hey Jondom22,

can you provide a link to your site? this helps people know exactly what code would help without any doubts or question.

on the host thing, usually once you update the dns it can take a half hour to 3 days for the changes to propagate. Usually takes an hour or so depending on where you are. However, with most hosts there is a way to access your site via it’s ip address on your shared server.

see this bluehost support page on the topic https://my.bluehost.com/cgi/help/wordpress_url

although for the hassle it might be best to wait till the dns propagates ??

Danny ??

Hey GrooveBricks,

Try this code. You could combine all of them into two, but i kept them separate so you’d have a little more control. Again place them where is best for your situation in css files. Keep me posted ?? Let me know how it goes or if there’s any other help I can provide.

Danny ??

/* Author Description Name Link */

.author-description h2 a {
color: #005081 !important;
}
.author-description h2 a:hover {
color: #cccccc !important;
}

/* Single Post Bottom Post Nav Links */

.single-post-nav a {
color: #005081 !important;
}
.single-post-nav a:hover {
color: #cccccc !important;
}

/* Related Posts Thumbnail Looks */

.related-posts ul li a {
color: #005081 !important;
}
.related-posts ul li a:hover {
color: #cccccc !important;
}

Hey GrooveBricks,

Awesome site and niche biz! It looks like a fun biz ??

Try the following css code. Add it to your theme where ever is best for your theme’s particular situation.

.breadcrumb {border-top: 6px solid #005081 !important;}

Should work as i tested it in firebug. Let me know how it goes and if you need any hands on assistance!

Best Regards,
Danny