Support » Theme: Orvis » Multiple Color Schemes, Orvis Theme

  • Resolved jasperh

    (@jasperh)


    Hello,

    i really like the Orvis Theme and i was looking forward to the coler pallets, but i can’t find theme.

    We’ve included a few free featured color palettes to inspire you

    and i really need this inspiration, i’v tried the jetpack custom css but im not made for this im afraid

    I hope someone can help me out

Viewing 15 replies - 1 through 15 (of 18 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi there – this is marked as resolved so maybe you’ve gotten this sorted, but I thought I’d reply in case it helps others.

    The colour schemes are a WordPress.com feature, but if you’re running Orvis on a self-hosted WordPress installation with your own hosting, you can add custom CSS to get the same effect.

    These are the six included palettes:

    Customize kp test site a very nice tagline

    I’ve made a Gist for the first one, which is a grey/black on white background palette:

    https://gist.github.com/kathrynwp/64b9259085ee2249eaa1ac2b9eaf36ec

    You can also replace any of the colours with your preferred shades.

    For anyone trying a new colour palette – don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS. You could also install a standalone custom CSS plugin if you prefer.

    Thread Starter jasperh

    (@jasperh)

    Hello Kathryn, thanks for the reply! I marked it as resolved because i bummed into on other issue and i changed the theme to Illustratr. But if you (maybe) can solve this issue i change back and start building.

    The issue is that im using ‘justified image grid’ to show my foto’s (so i can use flickr) but when i post the shortcode in the Orvis theme. Orvis don’t now this is a photo so everything stays on the left side.

    Shortcode example: [justified_image_grid flickr_user=143700726@N03 flickr_photoset=72157669984121350]

    What to do?
    Thanks and pardon my english 😉

    Moderator Kathryn Presner

    (@zoonini)

    Could you please provide a link to the page where you’re using the shortcode so we can have a look directly? It’s pretty well impossible to troubleshoot this sort of thing without looking at the site in a hands-on way. Thanks!

    Thread Starter jasperh

    (@jasperh)

    Hi Kathryn,

    this is the page where ‘justified image grid’ shows the photos on the left site: http://derest.nl/portfolio/de-rest-speelt-2016/

    It would be really great if you can figure this out!

    Moderator Kathryn Presner

    (@zoonini)

    Looks like your JIG (justfied image grid) element is being set to 276px directly on the element itself, so it can’t be overriden with custom CSS:

    <div id="jig1" class="justified-image-grid jig-d52187bd93d0198e946dfb09a3b6f7c3 jig-preset-global jig-no-touch" style="width: 276px;">

    It might be picking up the width of the column above it — but you won’t be able to override it with CSS because the width is directly on the element. You could ask in the plugin’s forum if there’s any way to override that value somehow.

    Thread Starter jasperh

    (@jasperh)

    Hi Kathryn,

    something strange: when i put the custom CSS you provided into my CSS-stylesheeteditor and click on “save” than the hole code is gone. I have tried it different times and with the use off {}
    What am i doing wrong? I’ve put in my stylesheeteditor the custom CSS for “Orvis Custom Colours – grey/black on white background” and this have done magic, thanks for it!

    Have a nice day!

    Hi there,

    Can you clarify the specific CSS that disappeared from your editor?

    I see you also mentioned that the CSS Kathryn provided for Orvis’ custom colours worked correctly. Did you enter some other CSS to try and resolve the JIG issue? If so, please add it your next reply.

    Thanks!

    Thread Starter jasperh

    (@jasperh)

    Hi Siobhan,

    the code that won’t stay in my CSS is:

    <div id="jig1" class="justified-image-grid jig-d52187bd93d0198e946dfb09a3b6f7c3 jig-preset-global jig-no-touch" style="width: 276px;">

    Thread Starter jasperh

    (@jasperh)

    And this is how my CSS looks right now:

    /*
    No site info 
    */
    .site-info {
    	display: none;
    }
    
    /*
    Orvis Custom Colours - grey/black on white background
    */
    .portfolio-wrapper .project-info .entry-title a,.portfolio-wrapper .project-info .entry-title a:focus,.portfolio-wrapper .project-info .entry-title a:hover {
    	color: #fff;
    }
    
    .portfolio-wrapper .project-info .entry-meta,.portfolio-wrapper .project-info .entry-meta a,.portfolio-wrapper .project-info .entry-meta a:focus,.portfolio-wrapper .project-info .entry-meta a:hover {
    	color: #a0a0a0;
    }
    
    #comments #respond .form-submit input#comment-submit:focus,#comments #respond .form-submit input#comment-submit:hover {
    	color: inherit !important;
    	opacity: .75;
    }
    
    #infinite-footer,.main-navigation ul ul,.site .tiled-gallery-caption,body {
    	background-color: #fff;
    }
    
    .dropdown-toggle:focus,.dropdown-toggle:hover,.menu-toggle:active,.menu-toggle:focus,input[type="email"],input[type="password"],input[type="search"],input[type="text"],input[type="url"],ins,mark,textarea {
    	color: #fff;
    }
    
    .dropdown-toggle:focus,.dropdown-toggle:hover,.menu-toggle:active,.menu-toggle:focus,hr,input[type="email"],input[type="password"],input[type="search"],input[type="text"],input[type="url"],textarea,#comments .comment #comment-form-share-text-padder,#comments .comment #respond #comment-form-comment,#comments .comment #respond .comment-form-fields div.comment-form-input {
    	background-color: #202020;
    }
    
    .dropdown-toggle:focus,.dropdown-toggle:hover,.menu-toggle:active,.menu-toggle:focus,input[type="email"],input[type="password"],input[type="search"],input[type="text"],input[type="url"],textarea,.jetpack-portfolio .image-link,.widget.top_rated ul {
    	border-color: #202020;
    }
    
    #infinite-footer .container,.entry-title a:focus,.entry-title a:hover,.infinite-loader .spinner div,.jetpack-portfolio .image-link,.page-links>span,.page-links a,.page-links a:focus,.page-links a:hover,.portfolio-entry-title a:focus,.portfolio-entry-title a:hover,.site .jetpack-social-navigation a:focus,.site .jetpack-social-navigation a:hover,.site-title a:focus,.site-title a:hover,.widget_calendar tbody a:focus,.widget_calendar tbody a:hover,a,blockquote cite,blockquote small,body,button,input,input[type="button"],input[type="email"]:focus,input[type="password"]:focus,input[type="reset"],input[type="search"]:focus,input[type="submit"],input[type="text"]:focus,input[type="url"]:focus,select,textarea,textarea:focus,#comments #comment-form-share-text-padder,#comments #comment-form-share-text-padder textarea,#comments #respond #comment-form-comment,#comments #respond #comment-form-comment textarea,#comments #respond #comment-form-identity #comment-form-nascar p,#comments #respond #comment-form-load-service p,#comments #respond .comment-form-fields div.comment-form-input,#comments #respond .comment-form-fields div.comment-form-input input,#comments #respond .comment-form-fields p.comment-form-log-out,#comments #respond .comment-form-fields p.comment-form-posting-as,#comments #respond .form-submit,.widget_akismet_widget .a-stats a,.widget_flickr #flickr_badge_uber_wrapper td a:last-child {
    	color: #202020;
    }
    
    code,kbd,pre,tt,var {
    	color: #202020;
    }
    
    ins,mark,.menu-toggle:active:hover,.menu-toggle:focus:hover {
    	background-color: #707070;
    }
    
    button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.jetpack-portfolio.hover:not(.has-post-thumbnail) .project-info,.menu-toggle:active:hover,.menu-toggle:focus:hover {
    	border-color: #707070;
    }
    
    #infinite-footer .blog-credits,#infinite-footer .blog-credits a,#infinite-footer .blog-credits a:hover,#infinite-footer .blog-info a,#infinite-footer .blog-info a:hover,#infinite-handle span button:focus,#infinite-handle span button:hover,.comment-metadata,.comment-metadata a,.comments-area .comment-likes .comment-like-feedback,.entry-footer,.entry-footer a,.entry-meta,.entry-meta a,.hentry div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post-context,.hentry div.sd-rating h3.sd-title,.hentry div.sharedaddy h3.sd-title,.jetpack-portfolio:not(.has-post-thumbnail) .project-info .entry-meta,.jetpack-portfolio:not(.has-post-thumbnail) .project-info .entry-meta a,.page-links>.page-links-title,.page-links a,.pd-rating,.portfolio-entry-meta,.portfolio-entry-meta a,.post-navigation .meta-nav,.site .tiled-gallery-caption,.site-content .contact-form label span,.site-content .jetpack-recipe .jetpack-recipe-meta,.site-description,.site-footer,.site-footer a,.taxonomy-description,.widget_goodreads div[class^="gr_custom_author"],.widget_goodreads div[class^="gr_custom_title"] a:focus,.widget_goodreads div[class^="gr_custom_title"] a:hover,.widget_jetpack_display_posts_widget .jetpack-display-remote-posts p,.widget_recent_entries .post-date,.widget_rss .rss-date,.widget_rss .rssSummary,.widget_rss cite,.wp-caption-text,a:active,a:focus,a:hover,blockquote,button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,#comments #comment-form-share-text-padder textarea,#comments #respond #comment-form-comment textarea,#comments #respond .comment-form-service a:focus,#comments #respond .comment-form-service a:hover,#comments #respond form *,#comments #respond p.comment-subscription-form label,.widget.top_rated #top_posts,.widget_akismet_widget .a-stats a:focus,.widget_akismet_widget .a-stats a:hover,.widget_flickr #flickr_badge_uber_wrapper td a:last-child:focus,.widget_flickr #flickr_badge_uber_wrapper td a:last-child:hover,.widget_upcoming_events_widget .event-when {
    	color: #707070;
    }
    
    #comments #respond .comment-form-fields label,#comments #respond .comment-form-fields label span.nopublish,#comments #respond .comment-form-fields label span.required {
    	color: #919191;
    }
    
    :-moz-placeholder {
    	color: #919191;
    }
    
    ::-moz-placeholder {
    	color: #919191;
    }
    
    :-ms-input-placeholder {
    	color: #919191;
    }
    
    ::-webkit-input-placeholder {
    	color: #919191;
    }
    
    ::input-placeholder {
    	color: #919191;
    }
    
    .site .jetpack-social-navigation a {
    	color: #636363;
    }
    
    #infinite-handle:before,.archive:not([class*="jetpack-portfolio"]) .hentry+.hentry:before,.blog .hentry+.hentry:before,.comment-respond:before,.comments-title:before,.infinite-loader:before,.infinite-wrap .hentry:before,.no-comments:before,.page-content .widget:before,.page-header:after,.page-links>span,.page-links a,.search .hentry+.hentry:before,.site .jetpack-social-navigation a,.site-footer:before,.site-main .post-navigation:before,.site-main .posts-navigation:before,.widget-area:before,.widget:not(:first-of-type):before,.widget_calendar tbody a,.widget_wpcom_social_media_icons_widget a,code,div#jp-relatedposts:before,kbd,pre,tt,var {
    	background-color: #eee;
    }
    
    blockquote,body .hentry .wpcom-reblog-snapshot .reblogger-note-content blockquote {
    	border-left-color: #eee;
    }
    
    .rtl blockquote,.rtl .hentry .wpcom-reblog-snapshot .reblogger-note-content blockquote {
    	border-right-color: #eee;
    }
    
    /*
    Hide all pictures  
    */
    .home .jetpack-portfolio-type-all-pictures {
    	display: none;
    }
    Thread Starter jasperh

    (@jasperh)

    And i want to post my total CSS so you can take a look, but it won’t stay in this post 😉

    I’m such an amateur, sorry. But thanks for helping me out!

    Thread Starter jasperh

    (@jasperh)

    Hi Kathryn,

    i use your ‘Orvis Custom Colours – grey/black on white background’ in my CSS, and it woks perfect!
    But now i want to change the color of all links into reddish (like in the Illustratr Theme) wish color codes do i need to change? (There are so many color codes ;))

    Thanks!

    Thread Starter jasperh

    (@jasperh)

    Hi @siobhyb,

    i found a [wporg-match] in my mailbox but i don’t understand the match jet. Are this the steps i have to take:

    1. put the https://gist.github.com/kathrynwp/64b9259085ee2249eaa1ac2b9eaf36ec#file-orvis-custom-colours-css into my child-theme to make Orvis ‘grey/black on white background’

    2. put this code <div id="jig1" class="justified-image-grid jig-d52187bd93d0198e946dfb09a3b6f7c3 jig-preset-global jig-no-touch" style="width: 276px;"> into my CSS to resolve the JiG issue

    Hope i’m not bothering you.

    Hi @jasperh,

    The following code, which you copied into one of your last replies isn’t CSS. It’s HTML:

    <div id="jig1" class="justified-image-grid jig-d52187bd93d0198e946dfb09a3b6f7c3 jig-preset-global jig-no-touch" style="width: 276px;">

    CSS and HTML are both coding languages that are used across the web but differ in the following ways:

    • HTML is used to build your content. The structure of your posts and pages are built using HTML. It can be used to structure images, paragraphs, and other elements.
    • CSS is used to style your HTML, and therefore your content. It is used to add colours, edit the size of elements, and more.

    Hope that’s clear!

    I also found the following guides, which dig in a bit deeper and give examples of the differences between HTML and CSS for you:

    The reason that the HTML was stripped out of the custom CSS editor is that only valid CSS can be added.

    The HTML is added via the plugin you’re using and, as Kathryn suggested, it’s best to contact the plugin’s author to see if there’s a way to change/override it.

    But now i want to change the color of all links into reddish (like in the Illustratr Theme) wish color codes do i need to change? (There are so many color codes ;))

    The colour of your links can be changed by editing this part of the CSS Kathryn provided:

    #infinite-footer .container, .entry-title a:focus, .entry-title a:hover, .infinite-loader .spinner div, .jetpack-portfolio .image-link, .page-links>span, .page-links a, .page-links a:focus, .page-links a:hover, .portfolio-entry-title a:focus, .portfolio-entry-title a:hover, .site .jetpack-social-navigation a:focus, .site .jetpack-social-navigation a:hover, .site-title a:focus, .site-title a:hover, .widget_calendar tbody a:focus, .widget_calendar tbody a:hover, a, blockquote cite, blockquote small, body, button, input, input[type="button"], input[type="email"]:focus, input[type="password"]:focus, input[type="reset"], input[type="search"]:focus, input[type="submit"], input[type="text"]:focus, input[type="url"]:focus, select, textarea, textarea:focus, #comments #comment-form-share-text-padder, #comments #comment-form-share-text-padder textarea, #comments #respond #comment-form-comment, #comments #respond #comment-form-comment textarea, #comments #respond #comment-form-identity #comment-form-nascar p, #comments #respond #comment-form-load-service p, #comments #respond .comment-form-fields div.comment-form-input, #comments #respond .comment-form-fields div.comment-form-input input, #comments #respond .comment-form-fields p.comment-form-log-out, #comments #respond .comment-form-fields p.comment-form-posting-as, #comments #respond .form-submit, .widget_akismet_widget .a-stats a, .widget_flickr #flickr_badge_uber_wrapper td a:last-child {
        color: #202020;
    }

    Hope that helps out. 🙂

    Thread Starter jasperh

    (@jasperh)

    Hi @siobhyb,

    it’s so nice that you’r helping me, is there a limit to your help?

    I have a four issues left that i want to solve and than i can start building:

    1. the JiG issue: i misunderstood Kathryn, but now i’m trying to contact the JiG-creator

    2. the color issue: my intention is not only to chance de link color, i also want to chance the hover-effect of the Orvis Theme into to hover-effect of the Illustratr Theme

    3. full width issue (i’v created a new topic for this): https://wordpress.org/support/topic/full-width-instead-of-widget-area-orvis-theme/

    4. social-menu issue (i’v created a new topic for this): https://wordpress.org/support/topic/social-menu-is-on-the-left-instead-of-the-right-orvis-theme/

    If you (or anybody else) can help me solve this im a very happy wordpress-beginner!

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Multiple Color Schemes, Orvis Theme’ is closed to new replies.