Remove drop shadow from galleries, and other questions

[aeheim]

Hi,

I need help on several edits I would like to make to my site. I don’t know very much about CSS and Javascript, so your help will be much appreciated. I am using the Integrity stack. My site is http://adrianaheim.com/ Here are my questions:

1. How do I remove the drop shadow from gallery media files in my portfolio posts? (See screenshot below)
   

2. How do I remove the lines at the bottom of each page on my site?

3. How do I make the Portfolio titles appear on top of the feature image upon hovering, instead of underneath?

4. How do I remove the drop shadow from the contact form?

I look forward to hearing your answers. Thanks so much!

[ruenel]

Hello There,

Thanks for writing in!

1.) To remove the drop shadow from gallery media files in your portfolio posts, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.wp-caption, .gallery-item {
    border: none;
    box-shadow: none;
}

2.) To remove the lines at the bottom of your page, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-colophon,
.x-colophon+.x-colophon {
    border: none;
}

3.) To make the Portfolio titles appear on top of the feature image upon hovering, instead of underneath, you can use this css code:

.x-iso-container>.hentry {
    position: relative;
    margin-bottom: 20px;
}

.x-iso-container-portfolio .hentry .entry-wrap {
    position: absolute;
    top: 0;
    left: 3.25%;
    width: calc(100% - 6.5%);
    height: calc(100% - 6.5%);
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 1s ease;
}

.x-iso-container-portfolio .hentry:hover .entry-wrap {
    opacity: 1;
}

.x-iso-container-portfolio .entry-wrap .entry-header {
    margin-top: 60px;
}

.x-iso-container-portfolio .entry-wrap .entry-header .entry-title.entry-title-portfolio a{
    color: white;
}

4.) To remove the drop shadow from the contact form, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

textarea:focus, input[type="text"]:focus, input[type="password"]:focus,
input[type="datetime"]:focus, input[type="datetime-local"]:focus,
input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus,
input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="color"]:focus, .uneditable-input:focus {
    box-shadow: none;
}

We would loved to know if this has work for you. Thank you.

[aeheim]

Thank you SO much!! The first two things worked perfectly!

The third thing (making the portfolio titles appear on top of the feature image) worked, but I didn’t like the look when I hovered. The gray shadow that appeared was larger than the image itself, and the titles appeared in various places (they weren’t consistently centered over the different images). So I decided not to use this.

The fourth thing (removing the drop shadow from the contact form) didn’t work. I realized that I didn’t clarify that I’m using the Contact Form 7 plugin, and that the drop shadow falls within the sections on the form (see the screenshot). What I would like to do is have solid, square borders instead of the shadow.

Thanks!

[ruenel]

Hello There,

To change the form to have a square, solid border and no shadows, please use this code instead:

textarea, input[type="text"], input[type="password"], input[type="datetime"], 
input[type="datetime-local"], input[type="date"], input[type="month"], 
input[type="time"], input[type="week"], input[type="number"], input[type="email"], 
input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border-radius: 0;
    border-color: black;
    box-shadow: none;
}

Please let us know how it goes.

[aeheim]

It worked! Thanks again!

Just one more thing: I’m curious if there’s a way to make the borders on the form thicker?

[christian]

Hey Adriana,

Add border-width: 2px; to the code @RueNel gave.

Just wanted to add that the codes we gave you serve only as a guide. We could not maintain it and continually give you custom code for your specific needs. We went above and beyond our scope of service here to help you get started. If you have more customization request, you will need to consult with a third part developer. Please see our Terms.

Hope that helps and thank you for understanding.