Hi,
In my design I have a slideshow but after exploring the built-in
slideshow and the other slideshow plugins, none of them are able
to help me attain my design objectives.
Now I have to re-design considering alternatives available to me.
Am I able to style the Classic Tabs?
I read the following post but it is a bit confusing as it goes into
custom code:
Hi there,
Thanks for writing in.
It can be, but sometimes it’s specific to a setup which may not work on another. Would you mind providing the site’s URL that has this tab? And what changes do you wish to apply? It could be just a simple CSS snippet 
Thanks!
Here’s my original design…
But as I said, the slideshow options doesn’t seem to provide me with solutions.
So I’m redesigning right now…
I’m asking because I want to know my limitations.
Hi there,
Hmm, how about providing more information. Does the slideshow is related to the tabs, or are you referring to the slideshow as tab?
There should be no limitation just as long as you’re familiar with CSS and proper use of CSS selectors. Except, you’re trying to change a feature into another feature, it’s limited to what you can achieve.
Thanks!
Hi @rad,
Can the built-in slideshow achieve the look I sent?
I know the other plugin slideshows can’t because firstly, they don’t
have TypeKit plugin integrated. Cornerstone has it but there’s
literally nothing I can do with the built0in slideshow.
Let me know.
In the meantime, here is a new design I have built with tab customization
in mind:
Please let me know if I can style the tab like the above design.
Thanks
Hi there,
If you’re referring to those 4 vertical items in left side then yes, it’s possible with CSS transform styling or rotation. Like this
.x-nav-tabs.left {
transform: rotate(-90deg);
}
Then simply add circles like this
.x-nav-tabs.left>li>a {
position: relative;
}
.x-nav-tabs.left>li>a:before {
content:"◦";
position: absolute;
left: 5px;
top:3px;
font-size: 30px;
line-height: 30px;
}
.x-nav-tabs.left>li.active>a:before {
content:"•";
font-size: 20px;
}
Then add more styling to remove the borders, and enhance the above CSS as you customize it that leads to dimension changes.
Thanks!
Hi @Rad,
Excellent!
This is how it looks now…
Now I just have to do some adjustments like:
Hi there,
Yes, please do that. Unfortunately, I can’t provide further customization as this will turn out as redesign. We could only help with little snippet and some guidance. Now, please target those tabs with lines and use its selector to remove its lines. Then do some CSS positioning to make it appear in the bottom. Should be doable with standard selectors, please check this video https://www.youtube.com/watch?v=GMk7ZLuo6Po
Thanks!
Hi @Rad,
Thanks for your help anyway.
Coming from a background of absolutely no development or code,
I have absolutely no idea how to find my feet other than what I see
in front of me. Hence opting for “drag and drop” website development.
And coming from a frame of reference of that of your competitors,
I thought that I’d had that kind of sophisticated control over elements.
So far, it is a steep climb to really control elements and observation
is that around every corner, there is a need for custom code.
This is not what I anticipated but sort of roll with it.
This is to give you some idea of where I come from when I asked
for help. From a design perspective, the design is finish. I just need
to develop the design, which is my biggest challenge at the moment.
I do appreciate your responsiveness and your support, no doubt.
Just want to clear up this notion of “further customization.” I really
think you should look into either expand control of your theme
builder or give more support than a “little snippet and some guidance”
because I would think that your target market include Designers
who has no development background but are top heavy of
design excellence and minute diligence.
Thanks
Hi There,
Well…So, first of all, I understand how you feel, but let me explain a few points on your design approach which I would address before all.
X Theme actually offers you a massive element control way above them most of the themes, in one hand this can be overwhelming and you can start to find yourself on deep waters which you didn’t even want to visit in the first place.
The tab element has its characteristics, turning them into a specific design which you previously created will, of course, take some customization involved since you will need to overwrite them standard design.
Learning CSS is the way to go to take his approach, it is not hard but just takes practice, I do recommend the course CSS Basics from DevTips on youtube.
That said, I would suggest playing with the tools you have as you know how to use.
Going for your original design, I would suggest you doing the following.
Use a Classic Slider.
Since you don’t know yet much HTML and CSS, creating the content as it looks now inside the slider although quite simple would be complicated. So for this we will use Global bocks, and each slide will be built as a different global block.
That way you will be able to create on the global block the content as on your pictures inside the slide using Cornerstone functionality of columns and all elements.
Once you do that you can add the global blocks shortcode inside each slide on classic slider.
That way you will have a very similar design to what you initially want, if there is more details you want to adjust you can let us know but if it starts to follow into customization you will need to research yourself, contract a developer to help you or use the tools available from different angle.
Last tip, simple always work and always look good.
Hope it helps
Hi @Joao,
Thank you for your compassion!
What keeps me motivated is your support and excellent
responsiveness. I really appreciate it.
Ok, I have gone back to my original design with the hopes
that I will get it right after your advice.
I am busy with the block:
I want to use this block as a base to create the other blocks.
My questions at this stage:
Thanks
Helo,
Thanks for the kinds words.
They will be part of the slider.
Your global blocks will contain the content from inside each slide.
The shortcode of each globl block will be pasted on each slide on your classic slider on your main page.
Do this, and we can check the arrows later, but they are part of the Classic Slider on your main page.
Hope it clarifies
Ok…
I have added all my blocks without indicators (bottom left) and arrows (top left).
I have created a classic slider and pasted the global blocks short code in
“content” and in ID but nothing:
What am I missing?
Hi,
Would you mind providing us with login credentials so we can take a closer look? Please provide following information:
Set it as Secure Note
All the best!
Hi there,
I just checked it and the shortcode is added to the ID field instead of content. But seems it’s a bit buggy as it triggers javascript error when I change it. And with your previous question, it will still require customization of you wish to control the navigation/indicators according to your preferred design. It’s unavoidable, so I recommend using Revoluion Slider and set its’ bullet navigation to the left.
Examples
https://www.themepunch.com/revslider-doc/navigation-editor/
https://www.themepunch.com/revslider-doc/layer-actions-links/
It’s the closest and easiest without too much coding. You can create your own navigation and position it, or use layers to act as navigation.
You can find some samples here https://revolution.themepunch.com/examples/ and select tab one. They are just samples, and you can rotate the layers if you wish to make it the same as your design.
Thanks!
Sigh.
I understand you’re trying to help and find solutions
with me. I also feel like I’m going in circles. I thought
I’m onto something after @Joao’s advice.
As stated right in the beginning, the alternative slider
plugins are not viable for me because they don’t have
the TypeKit plugin and my sliders are font-based.
Unless there is a way I can bring the Global blocks
(as is) into these slider plugins and then export them
back into the slider element setting on my page.
Let me know if this is possible. Otherwise it seems I have
to go back to my alternative design.
Thanks
Hi there,
Sorry for the confusion, it’s doable as Joao said. But it’s limited, especially the indicators that you’re referring to your previous reply. You could use Classic Slider and add your content as a global block, but it’s only limited to its design and view.
I only suggested the Revolution slider as I thought you’re planning to follow the design where indicators/navigation is displayed on the left.
Global blocks only contain content and some specific styling (inline). So it should work if added to RevSlider or Classic Slider. As for the fonts, as long as the font is loaded by the theme, you can always apply the same font’s CSS or Class to Revslider’s layer and maybe with the help of !important; like font-family: Lato !important;. You can manually add a CSS to your Revslider layers. The only downside with this is, it will only take effect on the slider of the live page and not to the slider preview in admin.
All fonts are rendered in the front, so there should be no issues. Just make sure it’s applied to the layer’s CSS.
Thanks!
Hi @rad,
All of this still blows over my head after reading your
reply a few times over. Perhaps a developer might
get your useful input.
Without sacrificing my end goal, I’ve redesigned it again.
Perhaps this time the process will be much easier.
Here’s my design.
It is designed with the “Accordion” element in mind
but again—like the tabs and slider—going through the
accordion it seems limited again.
What I need it to do:
Change the font, font size and weight
The Tab heading needs three columns
The Tab needs padding for little adjustments
The Tab icons need to be replaced
It needs to be able to have an additional text element (left)
The body copy section needs to be separate into x2 sub-rows
It needs control over these row and column containers for alignment
Please let me know if this is possible without a massive headache.
Thanks
Hey There,
I am another staff checking in your thread. Based from your screenshot, you can basically do it using the Accordion element. Use the v2 and not the classic one because you have more controls with the v2 element. Please see my initial take in your design using the v2 Accordion element.
1.) The font, font size and weight can be control in the Accordion settings particularly the “Header” and “Content” tab; http://prntscr.com/j1w0ho
2.) The tab heading can accept custom html so this would be easier also. I used this as an example:
<span style="margin-right: 140px;">001</span><span style="font-weight: bold; color: black;">Design</span>Thinking
3.) Still can be set in the Accordion settings in the “Header” tab. http://prntscr.com/j1w1tg
4.) The Tab icon can still be set in the Accordion settings, in the “Header” tab as well; http://prntscr.com/j1w267
5.) This can be achieved by adding a custom html for the accordion item titles. Please check my code in #2
6.) For the content of the accordion, you can make use of the block grid shortcode or the columns shortcode if you want to divide your accordion content. You can check out the shortcodes from here: http://demo.theme.co/integrity-1/shortcodes/, http://demo.theme.co/integrity-1/shortcodes/block-grid/, http://demo.theme.co/integrity-1/shortcodes/columns/
7.) You should be able to control the columns with the shortcode options and if necessary, you can make use of the inline style option as well.
I would advise that you set up your accordion element first. We can help you with the smaller details for the refinements like the borders, font weights, etc. later on.
Hope this helps.