Editing CSS in web site templates

Discussion in 'Web Design and Development' started by patent10021, May 22, 2014.

  1. patent10021, May 22, 2014
    Last edited: May 22, 2014

    patent10021 macrumors 68030


    Apr 23, 2004
    I like this template.


    problem is most sites these days are using this horrendous wide screen format where the slider and site colour bands extend right to the edge forcing users to use huge photos etc. And since they're responsive templates they're HUGE if you're on a 22/27 Mac.

    I would like to basically center templates so that it's easier on the eyes, allows for smaller photos and looks more business like. I want it to look like the size on a macbook even though I'm on an iMac.

    Take this template for example. If you're on an iMac and you drag the window corner to resize it to say a 17" display its nice a tidy, trim and easy on the eyes and easy to upload hi-quality slider images. Because its responsive the images and columns scale down and I like the smaller scale.


    I have dabbed quite extensively with CSS and know where to look like the tables/margins and PS is no problem either but in terms of messing with a site in its entirety I need help (thus the template). Plus it says major time.

    Is it easy to edit a site to what I want? How much do you think someone would charge to edit it?

    I mean it's just minor but global CSS,HTML and PS edits right? The site is responsive but I'll disable that as well as I really don't like responsive menus. There's nothing wrong with pinching on smart phones. I prefer to keep the desktop version menus since it's more of a standard white collar business.

    EDIT: Other question. I like WP sites because its so easy using dashboard. But I don't want comments boxes or any hints of a blog type site. Is it possible to use a WP site simply because it provides nice ePanels and dashboards and make it look like a normal non-WP site? Do people do this a lot?
  2. Flood123 macrumors 6502a


    Mar 28, 2009
    Living Stateside
    The first site you posted is built on a grid framework. Right now the slider at the top is set to 100% width. If you wrapped the slider in <div class="container_12"></div> like the other site containers I THINK that will solve your problem. The writer of the template already took care of the css for the .container_12 class.

    As for your comments issue, if you don't like them remove the like that looks like this in your template <?php comments_template(); ?>. I it will still be in your functions.php file but your template won't call it. That will remove the comment section. Or if you think you might want the comments in the future, on your post page in the dashboard and uncheck the comments box. I placed a screenshot below.

    I hope this helps ya.

    Attached Files:

  3. patent10021, May 23, 2014
    Last edited: May 23, 2014

    patent10021 thread starter macrumors 68030


    Apr 23, 2004
    yup thanks mate.

    ok I'm getting close to deciding on a template because everything i like about this one template is good EXCEPT the slider is way too big and its using 3 small images when id like to have just a regular slider carousel.

    Also I like having a text overlay on sliders because I don't want the focus on the images and it allows for more info. This template already has text on the individual images but again they are 3 separate images.

    Do you think it would be straight forward to change this slider size and type?



    And this one is pretty good but again if you view it on an iMac the slider and width of columns etc is just so huge. This is what I hate about responsive sites.

    Anyway if you manually resize the browser window to say a macbook window THATs the default size I like even when viewing on an iMac. I want everything more compacted and centered. Is there a way to adjust that?

    Ideally I'd like to turn off responsiveness for the iPhone, keep it for tablets (or all off) and compact and center everything.



    Btw, what do you think of Joomla sites compared to say just WP sites? Joomla sites are just as easy and compatible with servers etc?

  4. Flood123 macrumors 6502a


    Mar 28, 2009
    Living Stateside
    The first template you have shown is set up for posts in a 3 column layout. The posts are handled the same way a blog entry would be. The TRY! call to action takes you to a single page format. I don't thing there would be a simple way of formatting this if you don't REALLY know your way around code. This doesn't look like a good starting point for what you are looking for.

    For this second site you wound have to to constrain the site to a lower view port size in the css giving the container size max width whatever you are after. Not knowing where they have set up their break points there is potential for breaking the layout with changing the widths to much. Again, if you aren't familiar with coding its probably not gonna be the best jumping off point for you.

    The very nature of these responsive sites it to adapt to the viewport size of your device. This is the way it has been designed. It is probably better to find yourself a template that isn't responsive if you don't like this functionality .

    I don't really work with joomla so as far as that CMS is concerned i couldn't tell you what it's strengths are. I DO know that i love wordpress and work with it EVERYDAY. Either Joomla or Wordpress will play nicely with a linux server. I wouldn't be concerned about that.
  5. patent10021 thread starter macrumors 68030


    Apr 23, 2004
    ok thanks. Is it easy to make a responsive site non-responsive just by commenting out the resolution code in .sj/css? I thought most admin/epanels had a disable feature? No?
  6. Flood123 macrumors 6502a


    Mar 28, 2009
    Living Stateside
    It honestly depends on how the developer coded it. Did they do it mobile first? If so then the styles for the desktop experience are dependent in part by the styles in place for the mobile experience.

    If you want to experiment with it in the wordpress dashboard you could navigate to the appearance heading in the main menu on the side then navigate to editor. you will see a list of files. styles.css or whatever they named their css file will be in there.
  7. jtara macrumors 65816

    Mar 23, 2009
    If you are using a template, the first rule is to find a template that does what you want it to do.

    If you don't have the skills to modify the template to do what you want, you have no business trying to modify it. It's unlikely that "a little tweak" will get you what you want. But you won't know that.

    If you do have the skills to modify the template to do what you want, you will realize that "a little tweak" isn't likely to get you what you want, and you'll seek a better match. At least you will have to knowledge to assess whether it's practical to modify. Or you won't use a template, and start from scratch, and get just what you want.

    And clearly, the designer of the template doesn't adhere to your design aesthetic. Pick one that does.
  8. 960design, May 30, 2014
    Last edited: May 30, 2014

    960design macrumors 68030

    Apr 17, 2012
    Destin, FL
    Quick Fix:
    1) To get the image of the first template to match the 'styling-width' of the rest of the page change the css line 39 to:
    .camera_wrap {
    width: 960px;
    margin: auto;
    /* height: 550px; */

    Proper Fix:
    create child theme

    The quick fix will break every time you update your template.

    Yes. $70US / hour , 2 hour minimum

    It sure is; yes we do.

Share This Page