Photography theme, graphic changes in the template

  • aniaegypt · Member ·

    Hello,

    I just changed background color from dark to white and some problems occured. Please help me to solve them. I have Custom CSS so if there any changes are necessary please let me know the code.

    1. Fonts (everywere: menu, footer, posts) consists of two different color layers: black and gray. How can I remove grey texts (under the black ones) in the whole website?

    2. Although I have CSS code:

    /* Hide homepage frame */
    .fr-home {
    display: none;
    }

    after changing background color to white light grey border appear on Home page around pictures. How can I remove it?

    3. At pages with Gallery template like f.e.
    http://aniakrukowska.com/2014/06/11/cairo-private/
    how can I change background color:
    a. under the picture to white
    b. panel with thumbnails to any color
    c. description of the project (below the picture) to white?

    4. How can I make narrow horizontal lines under and below the main menu, but not dotted ones as there are default at the theme?

    5. Now in sub-menu I have horizontal lines under and below sub-menu elements. How can I add vertical lines to sub-menu (to have “boxes” for every sub-menu elements)?

    Thanks for your help
    Ania

    The blog I need help with is: (visible only to logged in users)

  • aniaegypt · Member ·

    One more suggestion:

    until now I was working on dark color scheme. Most of the css changes (like removing lines under and below menu, changing background color to white) work there.

    When I change to light color scheme those css changes do not work – dots in the background appear, the background is not white although I have it in csss commands, etc.

    A.

  • thesacredpath · Member ·

    Hi Ania,

    1. I’m not seeing a black and grey on any of the fonts on your site. I see the menu fonts as a medium grey color. I see that you have set the background color for the sub menus to a white using the following CSS though. Did that fix the issue you are talking about?

    nav[role="navigation"] .nav ul.sub-menu li, nav[role="navigation"] .nav ul.children li {
    background: none repeat scroll 0 0 #fff;
    width: 180px;
}

    2. The grey around the slider is a box shadow. Add the following CSS to get rid of that.

    figure.image-frame img {
    box-shadow: none;
}

    3. This will change the grey around the thumbnails and the entry content below the thumbnails to white. You can edit the colors if desired.

    .galleria-container {
    background: #FFFFFF;
}
.entry {
    background: #FFFFFF;
    border: none;
}

    4. To add a narrow border under the top level menu items, add the following. You can adjust the color as desired.

    nav[role="navigation"] .nav li a {
    border-bottom: 1px solid #888888;
}

    5. To add borders around the submenu, add the following CSS.

    nav[role="navigation"] .nav .sub-menu {
    border: 1px solid #888888;
}

    On your second posting, if you have not gotten this taken care of, can you explain a little further what it is you wish to change? I’m not seeing any dots and the background (body) is showing as white.

  • aniaegypt · Member ·

    Hello,

    thank you very much for giving me codes :)

    1. the problem with fonts in the whole website is that they have shadows. When you use CTRL + to make any of the page bigger you will see it. Css code doesn’t help. I added my suggestion that I do work on dark color scheme because I think maybe the problem is here. But when I change to light color scheme then some css codes don’t work properly (f.e. changing background color in css to white doesn’t work and then still have dots). That’s the reason I still use dark color scheme.

    2. solved

    3. almost solved. May I have different color only for part which contains thumbnails (small pictures) in the page with Gallery template, f.e.:
    http://aniakrukowska.com/2014/06/11/cairo-private/

    4. it doesn’t work – I mean it works but there is not one line for the whole menu. Every text in the menu has line below with white breaks in between every menu element.

    5. solved

    6. How can I change colors in the contact form:
    http://aniakrukowska.com/contact/
    I would like to make it opposite: places to fill should be white when form can be light grey.

    Thanks a lot for your help.

    Ania

  • thesacredpath · Member ·

    1. Hmmm, they are subtle, but when zoomed in they are there. Add the following to get rid of them. I think this should catch all of them, but I can’t be sure.

    #container, .alert, #bitsubscribe #bsub-credit a, #bitsubscribe input[type="submit"], #bit #bitsubscribe p, #bit h3, #bit #bitsubscribe h3, #bit a.bsub, #h4home.simple-homepage-experiment #wrapper button.login-button, .simple-homepage-experiment .big-ass-blue-button, .simple-homepage-experiment .or, .simple-homepage-experiment h1, a.grav-view-complete, .gcard .grav-inner, body.light textarea, body.light select, body.light input[type="date"], body.light input[type="datetime"], body.light input[type="datetime-local"], body.light input[type="email"], body.light input[type="month"], body.light input[type="number"], body.light input[type="password"], body.light input[type="search"], body.light input[type="tel"], body.light input[type="text"], body.light input[type="time"], body.light input[type="url"], body.light input[type="week"], body.light #container, textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"],  {
text-shadow: none;
}
  • thesacredpath · Member ·

    3. I included both CSS rules so you can set each to any color you want, or set them to the same color.

    4. I took a guess that you wanted it under each word since you didn’t really specify. To have a solid line under the entire menu, add the following instead. 

    nav[role="navigation"] {
    border-bottom: 1px solid #888888;
}

    6. This switches the background and form colors on the contact form. You can edit the colors as desired. 

    textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], button, input[type="reset"], input[type="submit"], input[type="button"], .widget_tag_cloud a, .wp_widget_tag_cloud a, a#cancel-comment-reply-link, .comment-edit-link, .custom-more-link, #infinite-handle span {
    background: #FFFFFF;
    color: #6d6d6d;
}
.page-id-4 .entry {
    background: #6d6d6d;
}
.page-id-4 .title, .page-id-4 .contact-form label {
    color: #FFFFFF;
}
  • aniaegypt · Member ·

    Hello again,

    for the first problem adding css code to remove texts shadows doesn’t work.

    In my opinion the problem is connected to color scheme.

    Now I use Dark color scheme where I changed backround color to white (in css) and the side effects are shadows under the text.

    When I change to Light color scheme texts look perfect but I have dots at the background and doted lines above and under menu although both of them shouldn’t appear as I added proper css codes and it looks like those codes do not work in Light color scheme (?)

    Those codes are:

    /* Custom background color */
    body {
    background: #ffffff;
    }

    @media screen and (min-width: 900px) {
    nav[role=”navigation”] {
    border-width: 0;
    }

    Maybe I should change color scheme to Light and put different css codes for:
    – removing dots is the background
    – removing lines above and uder menu?

    Or maybe there is another problem between Dark and Light color scheme we should solve?

    Thanks for help.
    Ania

  • thesacredpath · Member ·

    Ania, on the text shadow, I had an ending comma that was causing the issue. Add this and it takes away the text shadows. Sorry about that.

    #container, .alert, #bitsubscribe #bsub-credit a, #bitsubscribe input[type="submit"], #bit #bitsubscribe p, #bit h3, #bit #bitsubscribe h3, #bit a.bsub, #h4home.simple-homepage-experiment #wrapper button.login-button, .simple-homepage-experiment .big-ass-blue-button, .simple-homepage-experiment .or, .simple-homepage-experiment h1, a.grav-view-complete, .gcard .grav-inner, body.light textarea, body.light select, body.light input[type="date"], body.light input[type="datetime"], body.light input[type="datetime-local"], body.light input[type="email"], body.light input[type="month"], body.light input[type="number"], body.light input[type="password"], body.light input[type="search"], body.light input[type="tel"], body.light input[type="text"], body.light input[type="time"], body.light input[type="url"], body.light input[type="week"], body.light #container, textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]  {
text-shadow: none;
}

    Can you take a screenshot of the dots in the background and above and below the menu and upload it to your media library where I can take a look at it? I’ve checked your site in Safari, Firefox, Chrome and IE10 and 11 and see no dots anywhere in the background on the main page.

  • aniaegypt · Member ·

    Hello again,

    thanks a lot for help. Most of my problems are solved.

    1. text shadows problem is solved. Please let me know how can I send you screen shot. I mean with dark color scheme I use now there are no dots which is what I want. The problem occures with light color scheme but as I removed shadows below the text in dark color scheme (thanks to the code you gave me) I don’t need to use the light color scheme. So for me the problem is solved.

    2. solved

    3. you gave code for two parts:

    .galleria-container {
    background: #FFFFFF;
    }
    .entry {
    background: #FFFFFF;
    border: none;
    }

    Is it possible to divide .galleria-container into two parts:
    http://aniakrukowska.com/2014/06/09/city-in-motion/
    – one: under the big picture
    – second: background of thumbails
    and give them different background color?

    4 and 5 – solved

    6. code works properly. May I also change texts colors in the form?

    Once a lot thanks for help
    Ania

  • aniaegypt · Member ·

    Hello again,

    according to my last post can you please help me:

    3. you gave code for two parts:

    .galleria-container {
    background: #FFFFFF;
    }
    .entry {
    background: #FFFFFF;
    border: none;
    }

    Is it possible to divide .galleria-container into two parts:
    http://aniakrukowska.com/2014/06/09/city-in-motion/
    – one: under the big picture
    – second: background of thumbails
    and give them different background color?

    6. code works properly. May I also change texts colors in the form?

    Thanks
    Ania

  • thesacredpath · Member ·

    Hi Ania, you can use the following to add a different color background to the large top slider area. Add this to your custom CSS and adjust the color as desired. It does require the image to be downsized slightly so there is room for the background color to show around it.

    .gallery-image-wrap {
    padding: 2% 3% 8% 3% !important;
    width: 94% !important;
    background: #CC0000;
}
  • The topic ‘Photography theme, graphic changes in the template’ is closed to new replies.