Custom CSS for Photographer Theme

  • Unknown's avatar
    cpwildlife · Member ·

    Hi!

    I have a Premium theme which allows me to add custom CSS but I unfortunately have no idea how to the coding so your assistance will be much appreciated.

    I’d like assistance with making the following changes if possible.

    1. The tagline to be moved so it’s move evenly spaced between the site title and the menu.
    2. Add a copyright text at the bottom of the page in the place of the smiley that’s appearing there for some unknown reason.
    3. Remove the comment/meta box that appears once you’ve clicked on any of the images in the gallery. I don’t want anyone to have the option to view a larger resolution image.
    The coding I was given to remove the meta info etc was the following, but it only works for the first image, once you scroll through the remaining images the info and comment box reappears.

    .jp-carousel-image-meta, .jp-carousel-left-column-wrapper {
    display: none;
    }

    Thanks in advance!

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

  • staff-zinnia · Staff ·

    Howdy :)

    I’m happy to lend a hand. This sticky post over in the CSS forums is a great starting point: https://en.forums.wordpress.com/topic/learning-about-css-1?replies=1

    I’ve increased the font size on the site while I work on it. It was really tiny. I would suggest leaving it at a more readable size.

    1. The tagline to be moved so it’s move evenly spaced between the site title and the menu.

    You’ll see that I’ve made this change. How does that look? The following can be found in your CSS tab:

    #header .site-title {
	margin-bottom: 40px;
}

    2. Add a copyright text at the bottom of the page in the place of the smiley that’s appearing there for some unknown reason.

    Here’s a bit more information on the smiley face: https://en.support.wordpress.com/smiley-on-your-blog/ The second bit of CSS I added is to hide that smiley face. 

    #wpstats {
	display: none;
}

    You can read more about copyright and trademark here:
    https://en.support.wordpress.com/copyright-and-the-dmca/

    3. Remove the comment/meta box that appears once you’ve clicked on any of the images in the gallery. I don’t want anyone to have the option to view a larger resolution image.The coding I was given to remove the meta info etc was the following, but it only works for the first image, once you scroll through the remaining images the info and comment box reappears.

    The gallery settings can be edited here:
    https://cpwildlifephotographycom.wordpress.com/wp-admin/options-media.php

    I’ve selected the option so that you aren’t able to click on the images for a larger view. Is that what you were trying to do?

    The last thing I did was remove the text from each gallery that said, “click on the image below for a larger view.”

    I loved looking through your pictures! Let me know if there’s anything else I can help with.

  • staff-zinnia · Staff ·

    The Copyright can be added with this CSS:

    .info::after {
content: "Copyright";
}

    Within the quotations where it reads Copyright you can edit that text to your preference.

    Let me know if you have any questions about this.

  • Unknown's avatar
    cpwildlife · Member ·

    Hi Liz :)

    Thanks so much for getting back to me and helping with the coding, the copyright and tagline is perfect!

    About the bigger image sizes, I still want the images to display in a carousel format once clicked on, but I want the option to leave a comment and to view the full image to be removed if possible.
    This is an example of the options I would like to be removed https://cpwildlifephotographycom.files.wordpress.com/2016/12/thumb_image1_1024.jpg

    and then if you don’t mind me asking you some more questions I’ll really appreciate the assistance.

    is it possible to move the social media icons seen at the bottom of the page to the top right corner?

    and on the following page, http://cpwildlifephotography.com/canvas-prints I would like to remove the border around the slideshow, if it’s not possible to do that, if I can maybe then just change to color to the same as the grey background?

  • staff-zinnia · Staff ·

    Howdy :)

    About the bigger image sizes, I still want the images to display in a carousel format once clicked on, but I want the option to leave a comment and to view the full image to be removed if possible.

    Yes, we can do that. The option to view the images in a carousel is in the media settings. I’ve turned that bit back on.

    As for the CSS changes, you will want to add the following 2 bits to Customize > CSS

    .jp-carousel-image-meta, .jp-carousel-left-column-wrapper {
	display: none !important;
}
    #jp-carousel-comment-form-comment-field {
	display: none;
}

    After you save these new additions of CSS go ahead and refresh the page to see the changes. Just like magic ;)

    There is more information on CSS and how it works. I’d like you to give that a read:
    https://en.support.wordpress.com/custom-css/

    The Instagram and Facebook widget are added to the themes designated widget space. It looks like this theme supports 3 different areas. You can play around with those at My Sites < Customize < Widgets

    I would like to remove the border around the slideshow, if it’s not possible to do that, if I can maybe then just change to color to the same as the grey background?

    We can match the slideshow background to match the page color. If you go to http://cpwildlifephotography.com/canvas-prints you’ll see the change made with this CSS

    .slideshow-window {
	background-color: #fff ;
	border: 20px solid #fff 
		;
}

    This change is going to affect the slide show on your canvas-prints and home page. We can isolate the change to only take effect on the canvas-prints page if you want. Please let me know if you’d like to do that.

  • The topic ‘Custom CSS for Photographer Theme’ is closed to new replies.