Search Results for 'post grid'

[Ben Ritner]

Ben Ritner

#52095

here is an example for one post:

#kad-blog-grid #post-1045 {
    background-color: #eee;
}

If you had more then one you would just copy and change the post number.

Ben

[Rolf Espen]

Rolf Espen

#51969

Hi,

Thank you for a wonderful theme.

So I have a few questions about responsivity for mobile and ipad/tablet screens. I have created an online shop using WooCommerce with the Virtue Theme. Everything looks fine when working on my computer screen, but as soon as I log in on my mobilephone there are a lot of issues. I’m a new beginner at this, so I really need some help sorting this out.

1.
I am using the primary navigation and mobile navigation for the Main Menu. When I visiting the page on my mobilephone I see a large Menu button – when pushing it I get the whole menu listed downwards with bulletpoints. My costumer has a lot of categories and subcategories. How can I “hide” the subcategories, and only show the categories by first click? For example – She has “Brands” as a category, and a lot of brandnames as subcategories. I want the costumers to be able to click the menu, see Brands – and then click Brands to see the list – if they want.

Picture 1

2.
Like I said I’m using WooCommerce and have been experiencing a few problems when viewing on a smaller screen. It is set up to show a revolution slider (with a simple text – shortcode put in product category) right under the menu and 4 product in each row. On the mobile screen the revolution slider is eihter hidden, placed on the far left halfway off the screen or in some cases it works fine.
Also, the products are placed to the far right, almost out of the screen, 1 in each row, and sometimes on top of each other. Sometimes you can see the feature image, and sometimes not.
In other words – nothing works like it should here. When you enter a product everything seems to work fine, but the problem lies in the view of several products in a category.

I want the products to be displayd at least 2 in a row when on a smaller screen, and aligned centered and not pushed to one side.

Picture 2
Picture 3
Picture 4
Picture 5
Picture 6
Picture 7 – computer screen

3.
On my shop page – I’m not using the shop page built in for WooCommerce displaying categories, but a page called Shop – I have listed the categories up by using the Virtue: Image Menu Item. This looks neet and tidy on my computerscreen, but again it looks off on the smaller screens.
It is once again shoved off to the far right of the screen, and only displays one image in a row. Here I would like to at least have it centered aligned.

Picture 8 – computer screen
Picture 9
Picture 10
Picture 11

My Costum CSS box in Theme Options looks like this:

.page-header {
display: none;
}

html, body {padding:0; margin:0; height:100%;}
#wrapper {position: relative; min-height:100%;}
#containerfooter {position: absolute; bottom: 0; left: 0; right: 0;}
.contentclass {padding-bottom:160px;}

#nav-main ul.sf-menu li ul.sf-dropdown-menu li a:hover {color:#f2a79d;}

#content .main {float:right;}

@media (min-width: 992px) {
#nav-second ul.sf-menu {
display: none;
}
.page-id-34 #nav-second ul.sf-menu {
display: block;
}
}

.sf-menu ul, .sf-menu li:hover ul, .sf-menu li.sfHover ul {width: 140px;}

a:focus {
outline: none;
}

@media (min-width: 992px){
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 30px;
padding-left: 30px;
}
}

.products div.product {
border:none;
}

#nav-main ul.sf-menu {
margin-top: 50px;
margin-bottom: 0px;
}

[class*=”post”] { border:none !important; }
#kad-blog-grid .blog_item {
border: 0;
}

I really hope you will be able to help me with this. Like I said I’m a new beginner and haven’t got too much experiece with WordPress, coding and all the rest of it. Hope to hear from someone soon.

Thank you!

Ida

[Rolf Espen]

Rolf Espen

#51969

Hi,

Thank you for a wonderful theme.

So I have a few questions about responsivity for mobile and ipad/tablet screens. I have created an online shop using WooCommerce with the Virtue Theme. Everything looks fine when working on my computer screen, but as soon as I log in on my mobilephone there are a lot of issues. I’m a new beginner at this, so I really need some help sorting this out.

1.
I am using the primary navigation and mobile navigation for the Main Menu. When I visiting the page on my mobilephone I see a large Menu button – when pushing it I get the whole menu listed downwards with bulletpoints. My costumer has a lot of categories and subcategories. How can I “hide” the subcategories, and only show the categories by first click? For example – She has “Brands” as a category, and a lot of brandnames as subcategories. I want the costumers to be able to click the menu, see Brands – and then click Brands to see the list – if they want.

Picture 1

2.
Like I said I’m using WooCommerce and have been experiencing a few problems when viewing on a smaller screen. It is set up to show a revolution slider (with a simple text – shortcode put in product category) right under the menu and 4 product in each row. On the mobile screen the revolution slider is eihter hidden, placed on the far left halfway off the screen or in some cases it works fine.
Also, the products are placed to the far right, almost out of the screen, 1 in each row, and sometimes on top of each other. Sometimes you can see the feature image, and sometimes not.
In other words – nothing works like it should here. When you enter a product everything seems to work fine, but the problem lies in the view of several products in a category.

I want the products to be displayd at least 2 in a row when on a smaller screen, and aligned centered and not pushed to one side.

Picture 2
Picture 3
Picture 4
Picture 5
Picture 6
Picture 7 – computer screen

3.
On my shop page – I’m not using the shop page built in for WooCommerce displaying categories, but a page called Shop – I have listed the categories up by using the Virtue: Image Menu Item. This looks neet and tidy on my computerscreen, but again it looks off on the smaller screens.
It is once again shoved off to the far right of the screen, and only displays one image in a row. Here I would like to at least have it centered aligned.

Picture 8 – computer screen
Picture 9
Picture 10
Picture 11

My Costum CSS box in Theme Options looks like this:

.page-header {
display: none;
}

html, body {padding:0; margin:0; height:100%;}
#wrapper {position: relative; min-height:100%;}
#containerfooter {position: absolute; bottom: 0; left: 0; right: 0;}
.contentclass {padding-bottom:160px;}

#nav-main ul.sf-menu li ul.sf-dropdown-menu li a:hover {color:#f2a79d;}

#content .main {float:right;}

@media (min-width: 992px) {
#nav-second ul.sf-menu {
display: none;
}
.page-id-34 #nav-second ul.sf-menu {
display: block;
}
}

.sf-menu ul, .sf-menu li:hover ul, .sf-menu li.sfHover ul {width: 140px;}

a:focus {
outline: none;
}

@media (min-width: 992px){
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 30px;
padding-left: 30px;
}
}

.products div.product {
border:none;
}

#nav-main ul.sf-menu {
margin-top: 50px;
margin-bottom: 0px;
}

[class*=”post”] { border:none !important; }
#kad-blog-grid .blog_item {
border: 0;
}

I really hope you will be able to help me with this. Like I said I’m a new beginner and haven’t got too much experiece with WordPress, coding and all the rest of it. Hope to hear from someone soon.

Thank you!

Ida

[emanuela]

emanuela

#51894

In the Theme Option/Home Layout I have the “Page Content Option (if home page is latest post page)” which has only 2 options: Latest Post Display and Use Post Grid Format. There is no enable option/button

[Ben Ritner]

Ben Ritner

#51581

Ok, I see your using the post grid widget. That widget was designed for the sidebar or footer. You can’t really change the image size unless you used a child theme copied the widget into it as a separate widget and changed the code.

The closest thing you can do it add a blog grid using a shortcode then use css to remove the post title and excerpt if you only want the images. http://docs.kadencethemes.com/virtue/#shortcodes

Ben

[Henry]

Henry

#51534

Sorry, the link is

http://tpy-urbanblog.com/nik-soupe/

I want to change the size of the images on the post grid.

[Ben Ritner]

Ben Ritner

#51529

Hey,
There isn’t away with tags. You can do this as a grid of posts if you use categories but there isn’t an option with tags.

The link you posted went to a not found page? The images in a gallery would be largely based on how many columns you had set.

Ben

[Hannah]

Hannah

#51340

Not sure what grid you’re referring to. Can you please post a link?

Hannah

[Helga Rakel]

Helga Rakel

#51216

Is there any way for me to stop the images crop when using the image slider in post summary. There is no crop when the blog summary page is in one column (as on the demo page seen here) but when using 2 or 3 columns the image (or the whole slider) is cropped to a new size.

I plan to use 2 columns and a lot of image sliders but my images do not look right when cropped.

Best regards
Helga

[Helga Rakel]

Helga Rakel

#51216

Is there any way for me to stop the images crop when using the image slider in post summary. There is no crop when the blog summary page is in one column (as on the demo page seen here) but when using 2 or 3 columns the image (or the whole slider) is cropped to a new size.

I plan to use 2 columns and a lot of image sliders but my images do not look right when cropped.

Best regards
Helga

[nico]

nico

#51052

Hi there,

ran into another issue. On load the portfolio grid isn’t aligned properly until i resize the browser window. The plan at the beginning was to have all portfolio items on one page. What I did so far to troubleshoot:

– tried to split portfolio in pages -> works better, but issue still occurs
– checked for missing featured images (as mentioned in another post in this forum) -> found some and fixed them -> issue still occurs but not that frequently

it is live here: *Login to see link
and a screenshot of the issue here: *Login to see link

It worked fine until we reached about 100 to 150 posts. As it is live already a quick solution would be great! 🙂

Best,
Nico

[nico]

nico

#51052

Hi there,

ran into another issue. On load the portfolio grid isn’t aligned properly until i resize the browser window. The plan at the beginning was to have all portfolio items on one page. What I did so far to troubleshoot:

– tried to split portfolio in pages -> works better, but issue still occurs
– checked for missing featured images (as mentioned in another post in this forum) -> found some and fixed them -> issue still occurs but not that frequently

it is live here: *Login to see link
and a screenshot of the issue here: *Login to see link

It worked fine until we reached about 100 to 150 posts. As it is live already a quick solution would be great! 🙂

Best,
Nico

[Ben Ritner]

Ben Ritner

#50797

Hey,
The testimonial posts show based on the order number you can edit in each post. IN the post attributes section. The lower the number the higher it will be on the page. by default they are all at 0 so it’s showing the oldest first but if you opened the newest post and changed the number to -4 then it would show first on the page.

If you would like to just have then ordered by date then you can use a shortcode instead of the grid template.

[testimonial_posts orderby="date" items="20" columns="3"]

Ben

[Ben Ritner]

Ben Ritner

#50386

It might be best to wait till you can get a link.

By line above images are you talking about the page title line?

From what I can see from your image:

“Second, the image grid isn’t totally lining up.”

It looks like you have portfolio posts that don’t have a set featured image. Can you make sure each post has a featured image?

Ben

[Ben Ritner]

Ben Ritner

#49975

can you post a link to your page?

having a completely tight grid is not part of the set options with virtue. Usually because of browser rendering (how they treat sizes when you need to split an odd number but you can’t have a half pixel) you would have to use tricky js that recodes the page to work and oversizes the images just a little bit.

With the method above it should work on most browsers but some it will leave lines.

Also you can’t really override the grid widths so changing your max width will be important based on how many columns you have.

Ben

[Patrice]

Patrice

#49754

Hi, I like the image grid look in the portfolio post, but I get four columns of images no matter what even if I edit the columns number in edit gallery. I’d like the option to go to 3 or 2 columns.

I managed to get almost the same result if I remove the options and do everything in the text area. Chose to columns then shortcode in the gallery images by id, but this is not ideal. First the white box surrounding the text is larger with this method and just makes the website harder to update in the future for other people.

All I need is for the column settings in gallery to be reflected on the portfolio page.

Hopefully this post is understandable, thank you for all the great work on this theme, I really like it!

Patrice

[Patrice]

Patrice

#49754

Hi, I like the image grid look in the portfolio post, but I get four columns of images no matter what even if I edit the columns number in edit gallery. I’d like the option to go to 3 or 2 columns.

I managed to get almost the same result if I remove the options and do everything in the text area. Chose to columns then shortcode in the gallery images by id, but this is not ideal. First the white box surrounding the text is larger with this method and just makes the website harder to update in the future for other people.

All I need is for the column settings in gallery to be reflected on the portfolio page.

Hopefully this post is understandable, thank you for all the great work on this theme, I really like it!

Patrice

[Hannah]

Hannah

#49517

Hi Henry,
To add more images to show as “featured” you can set your post summary to “portrait (or landscape) image slider” from the post edit page. Once this change is saved you should see an option to upload post slider images. This will show like the Image Slider Post seen here- http://themes.kadencethemes.com/virtue-premium/blog-grid-two-column/
Another option is to set your post content to display as Full rather than Summary (this is done in the Blog edit page). Then in each post you can add however many images as you like and either leave as is, or add a Read More tag (from the visual editor toolbar in the post edit page).
Hope that makes sense!

Hannah

[Hannah]

Hannah

#49513

You can use the Staff Posts feature like here- http://themes.kadencethemes.com/virtue-premium/staff/
You would just create individual staff posts then create a staff post page using the Staff Grid Template. In the edit page you’ll see an option to link images to individual posts.
Does this work for you?

Hannah

[Ben Ritner]

Ben Ritner

#49338

Sure, For the grid you can use css like this:

#kad-blog-grid .blog_item {
  border: 4px solid #eee;
}

Or the summary list you can use this:

.postlist article {
  border: 4px solid #eee;
}

Ben

[Helga Rakel]

Helga Rakel

#49329

I am trying to make a home page which has the first post big with summary (like on the Blog List Summary sample page) and then have the next posts in two columns (Like on the Blog Grid – Two Colums sample page). It would then look something like the front page for this website *Login to see link

I can get the two columns look by using the shortcode “blog_grid orderby=date items=-1 columns=2” in pagebuilder but I have not found any shortcode or way to get the on column look at top.

Is there any way for me to get this look?

[Helga Rakel]

Helga Rakel

#49329

I am trying to make a home page which has the first post big with summary (like on the Blog List Summary sample page) and then have the next posts in two columns (Like on the Blog Grid – Two Colums sample page). It would then look something like the front page for this website *Login to see link

I can get the two columns look by using the shortcode “blog_grid orderby=date items=-1 columns=2” in pagebuilder but I have not found any shortcode or way to get the on column look at top.

Is there any way for me to get this look?

[Clare]

Clare

#49319

Hi,

Is it possible to change the colour or thickness of the border around blogs posts that are pull in using the blog/blog grid page template or the shortcode?

Thanks

[Clare]

Clare

#49319

Hi,

Is it possible to change the colour or thickness of the border around blogs posts that are pull in using the blog/blog grid page template or the shortcode?

Thanks

[Ben Ritner]

Ben Ritner

#48561

ok so a gallery is easy but you won’t get the single pages that could provide more info about the product.

So gallery just opens in a lightbox, see here: http://themes.kadencethemes.com/virtue-premium/wordpress-gallery/

And a portfolio post will give you options to add a lot of different content on a page. see here how you can click on each one: http://themes.kadencethemes.com/virtue-premium/portfolio/

Setting up a portfolio post is how you start to make the grid. You go to portfolio > add new and add in the title and make sure you set a featured image. Once you have a couple built then you create a new page. In the page attributes you set the template to portfolio grid. Once your there let me know and post a link.

Ben

[Ben Ritner]

Ben Ritner

#48543

For that to show up in the portfolio grid you would have to edit the theme. This would be an edit beyond support because you would need to use a child theme and customize the code in a template file.

As for styling the portfolio hover its possible with css. IF you can post a link to your site and give me specifics of what you want I can help with the css.
Ben