[Michael GParticipant]

I know this theme has so much potential, but I just can’t figure out how to make it work for me. I have a basic understanding of html and css, and I know the difference between an ID selector and a class selector. However, I’m very new to coding and don’t really understand the difference between using html and css to build a page versus using shortcodes to build a page. There are so many places in this theme where you have the option of using these things and I simply don’t know when and where one is preferable to the other. For instance, let’s say that I choose to add one row in Visual Composer and that one row will consist of a one-quarter column and a three-quarter column. I now have multiple input fields available to me. Each element has an ID, class and style input. Each column has an ID, class and style input. Each row has a class and style input, but no ID option. Why no ID option for the row? At the upper right hand corner of the row, I see a </> CSS button, and I know that the Customizer also has a custom css input field. In addition to all these things, we are provided with dozens of utility classes. I know that all of these options serve to make this theme extremely flexible and customizable, but there are so many options that I’m confused about when and where I should use them and which is preferable to another. When is it best to use inline styling? When should I assign an ID? When is a class the better choice? When do I need to use a browser code inspector? How does the </> CSS button differ from the custom CSS input field in the Customizer? When is it most appropriate to use utility classes? Are there situations where shortcodes should be avoided? Can I insert more than one shortcode in a column? If so, will each be separately customizable? Can I do it without risking that pesky “Convert to New Version” notice from Visual Composer?
I sincerely apologize for asking so many questions at once, but I honestly don’t know how else to ask for help with this. If you can dumb this down for me so I can actually grasp how this theme works, I believe you can empower me to accomplish so much more than I’m currently able to do.
Thank you for providing such a wonderful theme and for the awesome support that you patiently deliver to those of us in need.

Michael

[Carla CParticipant]

Hmmmm I have hit a slow learning curve here also although I have not used the visual composer and maybe this is why I cant see all the options. While I am making plenty progress, having a list of the possible classes and a list of the possible styles would make the x-documentation.pdf fullproof (as all the other otpions e.g. button shape, the available posibilites are explained) and an explanation of the content band then container etc order and I would have no questions to ask, with relatively little experience. GREAT JOB X TEAM, but that one we extra helping hand could make it super simple for even the newest of newbs!

Do you have a list of the classes and styles I could access?
And do you have a tutorial simply explaining the structuring of your code?

THanks.

[Carla CParticipant]

As with a list of the icons etc. There is a tutorial in the knowledge base but if you are not using the visual composer, you have no clue what those icon options are.

[ChristianModerator]

Hey guys,

We recommend that you view our tutorials in our Knowledge Base. It has everything you need building a website with X. However, in web development or website building in general like what to choose between ID and Class, it is outside the scope of a theme and that knowledge is freely available online. But, we’ll add more resources to our Knowledge Base continually so we recommend that you visit it often to review existing and new materials.

Michael, please post your questions separately per topic so that others can learn from it too.

Carla, please see the Helper Classes section in X documentation. And, the icons are listed here.

We recommend that you get familiar with the tutorials available in our Knowledge Base and readily available designs in our demos before you build a site with X.

Hope that helps and thank you for understanding. 🙂

[Michael GParticipant]

Thank you for the courteous follow-up. Perhaps I didn’t explain my dilemma well enough. I understand the difference between an ID and class selector. What I don’t understand is how to use them with this theme so that they don’t conflict with the existing code. For instance, if I choose to enter a unique ID to a given element, do I need to put <element ID=”NAME IN PARENTHESIS” or just ID=NAME or just “NAME” or…??? And once I create a unique ID, do I then go to the css field and use #UNIQUE_ID_NAME to customize it? If so, do I use the </>css buttom at the upper right hand corner of the Visual Composer to do this, or do I enter the css at Customizer>Custom>CSS? The same questions apply to creating a unique class name, except that I would beusing “class” instead of “ID and a period instead of a hashtag.
I’ve read the documentation, searched the forums and watched the videos. If this information is clearly explained, I have failed to grasp it. Please consider adding a FAQ section to the Knowledge Base. A bit of time constructing a thorough FAQ section would likely benefit both the users and the support team. And please remember that most of us are visual learners. A picture is worth a thousand words. A few more videos and/or illustrations would probably clear up some of the more confusing aspects of this process.
Your theme is awesome and your support is awesome. If I can just gain a little more focus, you will have delivered the total package for me.
Thanks again,
Michael

[Carla CParticipant]

Hi

That is really helpful with regards to the Helper Classes. I missed that when reviewing the document.

However, without experience and know-how, or an available list of classes and styles I have NO IDEA what potential class and style attributes will work with the theme, or if simply any attribute will work with the theme?

For example does this list do for all the possible style attributes:

http://support.sas.com/documentation/cdl/en/odsug/61723/HTML/default/viewer.htm#a002972093.htm

And are these class attributes:
http://www.w3schools.com/tags/default.asp

You see without someone with experience confirming or providing a list I feel totally lost, not sure if they are the right thing as there are tonnes of hits from google search but I have no experience to know if these lists are just nonsense, or only style….or only class…or neither.

If you could please recommend two lists, one for class and one for style, in whichever html version is good for the X-theme and is compatible with the theme that would be fantastic. EXPERIENCED PERSONS POINTERS REALLY ESSENTIAL FOR ME HERE, I’M GETTING KNOWHERE WITH JUST GOOGLING AND NOT HAVING A CLUE WHAT I’M LOOKING FOR.

Help much appreciated,
Carla

[ChristianModerator]

Hey Michael,

The shortcodes use the same structure as HTML. Adding and ID to a Shortcode would be

[image id="your-id"]

Adding ID to HTML would be

<img id="your-id">

The CSS for that is

#your-id { width: 100%; }

If you want your CSS to affect a single page only, place it in the Visual Composer’s CSS (<> CSS). If you want site-wide, place it in your child theme’s CSS or in the Customizer’s CSS.

We’ll be adding more contents in our Knowledge Base soon.

Carla,

The attributes of our Shortcodes are listed in our X Documentation. You cannot add your own attributes. You can work with Shortcodes or the Visual Composer which are the same. That would be everything your need in building a web page out of the box with X.

Regarding web development (e.g. developing in HTML) in general though, we’re sorry but we couldn’t support you for that as it would involve coding outside setting up X out of the box.

Thank you for understanding.

[Michael GParticipant]

Thanks as always for the much-needed help. The url to my site is located in this thread. Would you kindly take a look at it and tell me how to remove the gray line/border just above the footer widget area? I’ve inspected the code and tried to remove it using several different selectors, but apparently I’ve failed to correctly identify it. I’d really like to remove it, if possible.
Also, at the very bottom of the page, the “Proudly Powered by” text is unreadable even though I’ve assigned a white text to the blue background. It was showing previously, but I think I may have somehow altered it while trying to add some other styling. I’ve verified that the footer css is still present, but it seems to be having no affect. If you can tell me how to make that visible again, I’d be very grateful.

[RadModerator]

Hi Micheal,

Can’t find you url address in this thread, instead I checked into your other threads and found this http://demolawfirm.peedeewebsites.com/. Is this still the same url you’re referring to this thread?

You could remove the gray lines above footer widget by using this css, and just add this at your customizer’s custom css (or child theme’s style.css)

.x-colophon {
border: 0px!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

And you’re missing “;” after your color.

letter-spacing: 2px; 
color:#fff
text-transform: uppercase; opacity: 0.5; filter: alpha(opacity=50);

Should be like :

letter-spacing: 2px; 
color:#fff;
text-transform: uppercase; opacity: 0.5; filter: alpha(opacity=50);

Hope this helps.

[Michael GParticipant]

Yes, that’s the correct url. It’s amazing how much stress one quotation mark or semicolon can add to one’s day. I guess the devil really is in the details. Thank you so much.

Michael

[ChristianModerator]

You’re welcome Michael. Subtle mistakes can cause chaos sometimes. 🙂

[Author]

Posts