Basic support is open to all members of Volatyl Themes but what about those who need a little more? That's what Volatyl Themes subscriptions are for. The Priority Support subscription gets you more detailed, personal support while the Advanced Development subscription not only includes Priority Support, but also grants you access to premium content only seen by subscribers. This premium content will help you take your Volatyl websites to the next level with advanced development techniques, integration tips, and more information on how to really put Volatyl to use. Check out the subscriptions!
This topic contains 13 replies, has 3 voices, and was last updated by 
-
Posts
-
Ok, so I’m tinkering around on my site. I created a custom page that will house an Amazon aStore. I added the iframe information to the functions.php file:
// Custom layout function custom_page_layout_1() { if ( is_page( 915 ) ) { ?> <!-- Your HTML goes here. --> <div id="main-content" class="full clearfix"> <div class="main clearfix"> <div id="wrap"> <div id="content" class="site-content border-box clearfix" style="min-width:100%;" > <header class="entry-header"> <h1 class="entry-title">aStore</h1> </header> <section style="width:100%;" > <p style="width:100%; height:900px;"> <iframe style="padding:2em;border:1px solid #d8d8d8; width:90%; min-height:900px;" src="http://astore.amazon.com/fairdefense-20"></iframe> </section> </div> </div> </div> </div> <?php } } add_action( 'main_content_custom_layout', 'custom_page_layout_1' );Now I’m using the Vibrant child theme and would like to show sidebar_2 along with the aStore on the same page as the astore. The astore iframe is wide (and NOT responsive!), and I’d like to drop out sidebar_1 just on this page to make room. I’m trying to blend the design into the rest of my site.
Any CSS ideas? 🙂
And for reference, here’s my site (still a work in progress) …
Also, I’m looking into finding some script that’ll automatically specify the height of the iframe to eliminate inner-scroll bars…
I love what you’re doing! Great stuff.
Because Vibrant is really just a starting point, the styles weren’t written to go too far in any direction… leaving you the ability to take the base CSS and run with it in any direction you wanted.
With that being said, I probably would try to take the simplest approach possible. First thought would be a custom template but if you plan to keep the typical Vibrant structure, maybe considering the built-in layout options for that particular page would be better.
I’d go ahead and change the custom template back to the default template and then use the Content – Sidebar layout instead of the site 3-column layout that your site is set as. From there, Sidebar_1 would be on the right (instead of sidebar_2) so you would have 3 simpler goals:
1. Make a few CSS tweaks to the Content – Sidebar layout to make it match the 3 column layout more. By default, the 3 column layout is 300px wider than 2 column. That’s not normall how I handle layout changes but Vibrant is a special case because it’s so big. So I would consider that as well as the size of the menu links. They are different based on 3 column or 2 column as well since the site size changes so much. Note: You don’t absolutely have to change the CSS at all. If you want the site to have the same exact structure on every single page, you’d want to do that. But if you’re okay with the store being slightly different, considering it’s a store, you can pretty much skip this step.
2. Rebuild the typical sidebar_2 contents into sidebar_1 if you are wanting the far right sidebar to be the same on every page of the site. If you do take this approach, be sure to communicate with me on how easy or hard that is for you. That may be a process I need to refine in the Volatyl core.
3. Making the store responsive. Now the iframe itself is already responsive in Volatyl by default. The store core is a different story, though. From the looks of things right now, that doesn’t seem to be in your hands with the iframe code. Are there any controls on Amazon’s end? Is iframe your only option? No raw HTML with maybe some javascript snippets to pull the products? Let me know.
I think you have a nice project on your hands here. Let me know every snag you run into as some of them may very well change the way to do certain things in Volatyl itself!
Yeah, I was wanting a two column design for this page that I would be able to tweak, But it appears that the Vibrant theme applies globally, meaning that making a two column design for this particular page would mean making every page also a two column design. I was thinking that I could use firebug to take the main elements for a two column design and just tweak it from there.
It’s be really cool (and easier) if we could use different page layouts for each individual page in Volatyl. You know, making it where we could “turn on” and “turn off” sidebar elements and then the content would automatically resize to gobble up the space leftover by an “off” sidebar.
Amazon does allow editing of their CSS, but they’re pretty strict as to how much minimum space is needed for the store to work. Really, an iframe store is the way to go because a while back Amazon limited the number of API requests to just 2000 per hour — and search engine spiders can gobble up all those requests and make Amazon return an error message instead of the products requested.
Just to make sure I’m understanding you correctly, you do realize that you can control the site layout on a per page/per post basis, right? I outlined it here in the last section of this documentation page. That’s what I was suggesting in my reply… just using the built-in feature for displaying the site structure for that particular page. Volatyl and Vibrant are built to handle that difference without any funky CSS stuff going on.
If I’m understanding the misunderstanding correctly, here’s a screenshot of what you’d need to use to make that page “Content – Sidebar” while the rest of your site has whatever layout you want. http://cl.ly/image/0r2q2O1T1F45
You’re free to do that on ALL posts and all pages at any time.
Wow! I’m an idiot! 🙂 I’ll look into this right away!
[Edit]
Ok, after looking into this, it seems that when choosing a custom page layout, it doesn’t allow me to choose which particular sidebar gets displayed where. It defaults to sidebar_1, I assume, so that when only one sidebar is chosen, it’s always going to be sidebar_1 and not sidebar_2.
content (no sidebars)
content (sidebars below)
content – sidebar <– sidebar_1 is displayed.
sidebar – content
sidebar – content – sidebar
content – sidebar – sidebarThat is correct. Now that you know about this option, you should go back and read my first response as it will make a lot more sense. Particularly my second point, I talked about how when it’s “Content – Sidebar,” sidebar 1 becomes the primary sidebar regardless of if it’s on the let or the right (as it should).
So I mentioned that if you wanted that far right sidebar on that page (sidebar 1) to match the far right sidebar on 3 column layouts (sidebar 2), you would need to rebuild it yourself, which is a much easier task than your original request. So I stated that in handling that task, communicate closely with me if you have any hiccups so that I can make that process easier over time… within reason.
I know things would be a lot easier if you could just select sidebars at random but that’s a much taller order than people realize.
The approach I would take, especially since it can be used over and over again, would be to build the contents of the special sidebar in my own PHP. I would use the vol_before_sidebar_1 hook with a conditional that only places it on that specific page. Then in that hook (raw PHP, not the hooks interface), I would place the same content in them and just inspect the widget elements to grab the exact HTML structure, classes, and IDs to make it identical to sidebar 2. Then you could simply use CSS to hide the original contents of sidebar 1 specifically for that page. To target just that page with CSS, you can add your own class (text box right beneath the page layout chooser).
Does that make sense? It sounds way more complicated than it really is. Let me know if we need to work side by side on that. It should be a fairly simple process if you are familiar with hooks, functions, and HTML.
Just so you know, I’m inspired to TRY to build a simple system where you can check a box on the edit post/edit page screens that when checked, will replace sidebar 1 and sidebar 2 (1 checkbox if the 2 column layout is selected… 2 checkboxes if it’s a 3 column layout) with new widgetized areas that you would then go to the widgets screen and use like normal sidebars. They would be named based on maybe the slug of that post or page.
I’m going to try. It’s an option worth having so let me see what I can do.
I have good news! After my last post, I sat down to tackle this “issue” with hopes that I could get it done. I did. 🙂
If you haven’t updated to 1.1.1 yet, 1.1.2 is out with the new feature. However, you need to read what I wrote about 1.1.1 if you haven’t done so. It’s very important to how your child theme needs to be adjusted for the update.
Once you’re upgraded to version 1.1.2, you’ll see the new feature in the Volatyl Quick Settings beneath each text editor on the Edit Post and Edit Page screens. http://cl.ly/image/0Y27041Y0i24
I’m pretty sure that’s what you were looking for. Enjoy. 😉
Hey thanks! It seems that I do have some control over the CSS for an Amazon aStore. Right now, the CSS isn’t responsive .. at .. all on Amazon’s end. It might be possible for me to go in there and do a few tweaks to make it a “little” more responsive, but I can’t tell yet.
Actually, did anything change in the .CSS to where the drop-down menus get hidden by #content ?
That definitely shouldn’t have happened but with the Vibrant skeleton, it’s a possibility with all of the positioning the columns have to go through for everything to work. It’s probably a matter of z-index. I’ll check it out and update the skeleton if so. If you can solve it with your own CSS in Vibrant, there are no issues with that as that CSS belongs to you.
Add this to your Vibrant CSS and you should be good with the menu:
.full-menu .menu li ul { z-index: 999; }That fixed it! Thanks.
cialis from canada pharmacy knowledge base
http://pharmashop-online.com – generic cialis online
cialis users
generic cialis usa
– cialis super active 20mg pills
cialis buy online australia started by
You must be logged in to reply to this topic.