Docs

[venya]

Hello Themeco,

Spent many hours this weekend working on the site and have a few things I need help formatting…

1. My portfolio is displayed in 2 different ways: as thumbnail and excerpt.

The excerpt page has some problems (for example… http://www.bennyfromtheblock.com/multimedia-category/liberty-authors/)

1. In the mobile site the titles of the videos are below the thumbnails. How can I put titles above videos?

2. Also in mobile site, the text area (entry-wrap?) is not full width like it is in desktop site. How can I make this full width?

3. CART – My cart page had some text inserted right above the “proceed to checkout” button. For some reason, it’s now no longer appearing. This is the custom code I had in javascript customizer…

jQuery(function($){
$( “<href=’/cart/’ class=’vkpaypal’><i class=’x-icon x-icon-lightbulb-o’ aria-hidden=’true’> You can use PayPal express checkout if you have a PayPal account, otherwise please Proceed to Checkout. ” ).insertBefore( $( “.wc-proceed-to-checkout” ) );});
`
5. My page titles are not aligning the way I would like…

For my shop, all category titles are centered. I would like them aligned to the left, starting where the first product image starts (ie. Not passed where the sidebar begins).

I would like the same for all pages: Publish, Multimedia, News etc..

5. Lastly, is it possible in X to assign a different sidebar on the mobile version of a page? There are a items on the sidebar I want to hide from mobile site.

Thank you.

[venya]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

#2 Find this CSS code :

.tax-portfolio-category .entry-wrap {
    color: brown!important;
    float: left;
    max-width: 65%;
}

And update it to :

@media (min-width:979px){
.tax-portfolio-category .entry-wrap {
    color: brown!important;
    float: left;
    max-width: 65%;
}
}

#3 Update your code to :

jQuery(function($){
$( "<href='/cart/' class='vkpaypal'><i class='x-icon x-icon-lightbulb-o' aria-hidden='true'><span> You can use PayPal express checkout if you have a PayPal account, otherwise please Proceed to Checkout.</span> " ).insertBefore( $( ".wc-proceed-to-checkout" ) );});

#4 Please add this:

.archive.woocommerce h1.h-landmark {
    text-align: left;
    padding-left: 25%;
}

#5 No, it’s not possible. let us know which widgets you want to hide in mobile devices?

Hope it helps.

[venya]

Hi Themeco Team,

Thanks for the fast support! You guys are awesome. #2,3,4 are now fixed, and figured out how to align the other page titles.

#1
I would really like to put the portfolio titles above the thumbnail instead of below… (see photo) I was looking through the forum and it seems like this kind of issues was solved by support in the past. Here’s a thread with the reverse issue…

https://community.theme.co/forums/topic/titles-under-thumbnails-in-portfolio/

Here’s the link to my page seen in photo (mobile view).
http://www.bennyfromtheblock.com/multimedia-category/liberty-authors/

#5 Its not crucial to have different sidebar for mobile, but wanted to remove the product search box, and newsletter signup box from mobile viewed sidebar.

#6 (new) In Cart, How can I move the “Cart Totals” section to the right, to be center under the above section, rather than all the way to the left?

#7 (new) On the same page, I would like to center the paypal logo below the orange button…its off. (see photo).

#8 (new) I formatted a portfolio page to be 2×2 instead of 1×1 on Mobile. I am trying to format the portfolio post titles but I can’t get the line spacing to change. It’s double spaced and I’d like to reduce to get everything to fit neatly.

http://www.bennyfromtheblock.com/multimedia-portfolio-7/

Here is the css I used:

@media (max-width:480px){
.x-iso-container[class*=”cols-“]>.hentry {
padding-right:.1px!important;width: 48%;}
}

@media (max-width:480px){
.page-template-template-layout-portfolio-php h2.entry-title-portfolio a {
font-size:14px!important;color:green!important; line-height:50%!important;}
}

Thank you in advance for your help!

[Lely]

Hi There,

You’re welcome!

1.) Please copy content.php from wp-content/themes/x/framework/views/intergrity/ to this folder:
wp-content/themes/x-child/framework/views/intergrity/.
Then open the copied file and replace the entire content with the following:

<?php

// =============================================================================
// VIEWS/INTEGRITY/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Integrity.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php x_get_view( 'integrity', '_content', 'post-header' ); ?>
  <div class="entry-featured">
    <?php x_featured_image(); ?>
  </div>
  <div class="entry-wrap">
    <?php x_get_view( 'integrity', '_content', 'post-header' ); ?>
    <?php x_get_view( 'global', '_content' ); ?>
  </div>
  <?php x_get_view( 'integrity', '_content', 'post-footer' ); ?>
</article>

By default this will display two title. We have to use CSS to hide one title per screen size.
Please also add this CSS:

@media (min-width: 980px){
.tax-portfolio-category article > header {
     display: none !important;
}
}
@media (max-width: 979px){
.tax-portfolio-category .entry-wrap >header {
    display: none;
}
}

#5 I can’t find the product search box and newsletter signup on the sidebar. Did you remove this already? If not, please clarify so we can help you better.

#6 Use the following custom CSS:

.woocommerce .cart-collaterals .cart_totals {
    float: none;
    margin: 0 auto;
    width: 60%;
}

#7

a.paypal-express-checkout-button > img {
    float: none !important;
}

#8 Please update this:

@media (max-width:480px){
.page-template-template-layout-portfolio-php h2.entry-title-portfolio a {
font-size:14px!important;color:green!important; line-height:50%!important;}
}

To this:

@media (max-width: 480px){
.page-template-template-layout-portfolio-php h2.entry-title-portfolio a {
    font-size: 14px !important;
    color: green! important;
    line-height: 1.1 !important;
    display: block;
}
}

Hope this helps.

[venya]

Absolutely….Brilliant! You have been a great help! Everything was fixed!

9. How can I decrease the space between the posts in this view? ( see photo)

10. How can change the font/style of the portfolios in this view for mobile?

#5 Those widgets are only in the shop pages sidebar. How could I remove the product search box, and newsletter signup box from mobile viewed sidebar. Here is an page with that sidebar.

http://www.bennyfromtheblock.com/product-category/new-arrivals/

11. Finally, On the same sidebar, How can I expand the input box of both product search and newsletter signup to full width of the side bar?

Many thanks again!

[Christopher]

Hi there,

Please add this :

@media (max-width:767px){
.x-iso-container-portfolio .entry-wrap {
    padding: 5px 6.5% 5px;
}

.x-portfolio h2.entry-title.entry-title-portfolio a {
    font-family: "Lato","Helvetica Neue",Helvetica,sans-serif;
    color: #0053AD;
    font-size: 17px;
}
#text-10,div#woocommerce_product_search-5{
display:none;
}
}
input#s,input#mce-EMAIL {
    width: 100% !important;
}

Hope it helps.

[venya]

Hello,
Thanks for that!

The code you provided actually changed the title in the wrong place, but I was able to figure it out…

Instead of (which changed titles: http://www.bennyfromtheblock.com/liberty-authors/ )
@media (max-width:500px){
.x-portfolio h2.entry-title.entry-title-portfolio a {
font-family: “Lato”,”Helvetica Neue”,Helvetica,sans-serif;
color: #0053AD;
font-size: 17px;}
}

This worked: (which changed titles here:http://www.bennyfromtheblock.com/multimedia-category/liberty-authors/)
@media (max-width:500px){
.tax-portfolio-category .entry-title {
font-family: “Lato”,”Helvetica Neue”,Helvetica,sans-serif;
font-size: 130%!important; padding-bottom:3%;}
}

#1
I would like to still decrease the space between portfolio items ( see photo). The code below didn’t seem to do anything…

@media (max-width:767px){
.x-iso-container-portfolio .entry-wrap {
padding: 5px 6.5% 5px;}
}

#2 On the sidebar, How do I make the width of the Woocommere product search
And Mailchimp signup form input boxes 100% the width of the sidebar?

Here’s a page with that sidebar.
http://www.bennyfromtheblock.com/product-category/biography-autobiography/

Thank you for the great help!

[Rupok]

Hi there,

Thanks for writing back. I think you should be able to do the rest of the customization based on the suggested code. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts