Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Modifying Content Asset

ErielEriel New
edited June 2016 in Vanilla 2.0 - 2.8

Hi everyone,

I am starting to create themes (learning how to) for Vanilla. Now i am having an issue, in which i don't know which file i should access in order to work with the "Content" asset.

I am going maaaaaaad looking for where to change the RSS image and where to change color/order of content in it.

Is there a php specific file for it? I can't seem to find :( I know need to use that file.

Can anyone give me a hand?

Thanks in advance :) I am trying to learn in order expand a little more knowledge in "forum themes" since this is my first time trying to create one!

Best Answer

Answers

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2016

    Every theme has a custom.css file where most of these things are, however all the style is in the default style.css of vanilla in applications->dashboard->design->style.css

    You never change looks by altering php files. You only work with the css files.

    Best advice is , use a web inspector . Because that is what anyone of us would do if we went to see your website. So the best tool to create or edit themes is a web inspector. Simple right click inspect element and see the css code affecting what you want to change.

    It is indispensable that you learn how to use a web inspector. Otherwise you will need to hire someone who does know how to use one. It does not take vanilla knowledge, it takes using a web inspector kind of knowledge ..

    No one can help you if you do not provide a link to your site and exactly what you wish to achieve. Saying that you want to edit the content asset without even knowing what that means is not going to help you here unless you actually want to modify it but you would need more vanilla know how for that and it has nothing to do with looks.
    If looks is what you want help with, you need to provide a decent example of what you want and also a link to the site.

    Get a web inspector. Get the CSSEDIT plugin...

  • Hi all, thanks for all the input.

    @vrijvlinder , ok gotcha, no touching php files.

    Also, i am already inspecting elements, therefor thats why i was asking the quesion.

    I cant change the name of the class that a table is using and that is my problem. Since the default design is calling the '{asset name="Content"}' i can't table anything in the tables as i can't touch the generated code.

    @R_J i created a new theme and am i trying to edit it "to my hearts content" while learning. This is the first time i hear about override views, will look into that! Thanks :)

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2016

    @Eriel said: Also, i am already inspecting elements, therefor thats why i was asking the quesion.
    I cant change the name of the class that a table is using and that is my problem. Since the default design >is calling the '{asset name="Content"}' i can't table anything in the tables as i can't touch the generated >code.

    Why would you want to change the name of an asset ? To add a class to #Content you would look in the default.master.tpl or php whatever the custom theme template is written in.

    Your theme should have one of these files in the views folder. The default one from applications/dashboard/views/default.master.tpl You don't touch.

    The way themes work, is that they use existing vanilla classes or ID to style them with css because it is easier to do than to rewrite the names and have to do it to everything. When you change the name of an asset in this case the name of a section, you are asking for trouble , you can however simply add class to the #Content section of your default.master.tpl any class you want for the element.

    Example of adding a class on a php based theme template

    <div class="MyClass" id="Content"><?php $this->RenderAsset('Content'); ?></div>

    To add extra ID

    <div class="MyClass" id="Content MyID"><?php $this->RenderAsset('Content'); ?></div>

    Example of adding a class for tpl based template

    <div class="MyClass" id="Content">{asset name="Content"}</div>

    To add extra ID

    <div class="MyClass" id="Content MyID">{asset name="Content"}</div>

    These sections already exist in your custom theme or they should. No need to clone views or mess with the content asset. Cloning is for function purposes, to add more php and hooks to it but it is not needed just for changing the looks and layout of something. If you feel the need of doing that, you are not doing it right as far as design and theming goes. Because all you need is CSS and modifying your default.master.tpl or php in the views folder of your theme.

    The CSS for the added class or ID

    #Content.MyClass{
    background:blue;
    }
    

    To add class to something with class already

    #Content.Someotherclass.MyClass{
        background:blue;
        }
    

    To Add extra class or ID

    <div class="Column ContentColumn" id="MyID">

    .Column.ContentColumn#MyID{
    background:blue;
            }
    

    Remember though that removing or changing ID or class might have bad effects. It is better to simply add another class or your own id if there is no id in the element.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Do not mix up what Asset is and what class or id are. Asset name implies a section / container in the layout of the page.

    Asset Name = Content, is not the same thing as #Content or ID=Content

    Vanilla uses these Assets as containers for content , Head , Panel, Body, Content,Foot . These determine where content goes based on plugins and apps etc. So if I have a module I want to put into the Panel Asset,
    I would make it Target that asset to be added to the String of code for that particular Container.

    If you change the name of the Container, other plugins or apps will fail to work. You need to stay with the framework as close as possible or your theme will not work with many things that require those be the names of the assets.

    You can change ID or add ID you can change class or add class to elements. But changing the name of the Assets/Container will be a headache you will never recover from.

  • R_JR_J Ex-Fanboy Munich Admin

    @Eriel said:
    Hi all, thanks for all the input.

    @vrijvlinder , ok gotcha, no touching php files.

    Also, i am already inspecting elements, therefor thats why i was asking the quesion.

    I cant change the name of the class that a table is using and that is my problem.

    That is the wrong way. Don't do so. If the used class has a style you do not like, give it another styling. Don't try changing the class.

    Why do you want to change class names?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    @R_J said:
    Why do you want to change class names?

    My guess is he adapting some other theme to work with vanilla and instead of changing that theme's classes and ID to match vanilla's , he is doing it the other way around and it does not work.

  • I am trying from scratch really. i am following the instructions that are in default theme (the readme).

    I have basically changed everything except the content inside the "asset Content". And when i am doing an inspect elements, it shows me that the elements i want to change are inside already existing classes, which i can't edit.

    what it looks like at the moment:
    https://postimg.org/image/axz1m90x3/

    what i am trying to make look like:
    https://postimg.org/image/vy84xlezl/

    I am trying to make everything less darker around the content.
    (I am a she xD not he)

    I will go take a look at everything again and try it with all your pointers, sorry about my "stupidity" i am still learning :( thanks everyone

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2016

    Did you clone the default theme or are you editing the default theme ?

    If you are editing the default theme , you are doing it wrong. You don't touch that.

    You need to create a custom theme. Please try out some custom themes so you get an idea of what is possible.

    Without a link to see , I can't help you. Pictures do not help because I need to see the code.

    You have no idea how irritating it is when people don't provide a link. It is a waste of people's time .

    You don't need to change class names , if there is no CSS rule you make one by using the existing classes or I'd

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2016

    it shows me that the elements i want to change are inside already existing classes, which i can't edit.

    What ? If something has a class you use that class to make your css rule…

    example

    I use the inspector to find the class or id because that is what will help me add a new rule to the custom theme. Here is what I see in the html source for the Panel . It already has a class and an Id

    <div class="Column PanelColumn" id="Panel">

    If there is no CSS rule for this element, you make your own by using the existing classes , they are what help you not change the color on everything and allow you to customize the look on every single thing.

    #Panel.Column.PanelColumn{
    background:blue;
    }
    
  • @vrijvlinder and @R_J i did it... took me a awhile, but it was something so simple...

    Oh boy... sorry for all the hussle!

    I was looking at the wrong classes :(

    Thanks you both for the patience you had

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    @Eriel said:
    took me a awhile, but it was something so simple...

    You need to know that this is a help forum but not just for receiving help, also giving it back by way of the solution to your problem, which we never really understood because you never provided any code or a link or even the code you used to "Change Classes" or answered any of our questions to you, basically making this discussion a non sequitur.

    The purpose of this forum is to gather intel that can serve as helpful for other people , mostly code. What code you changed where, how did you do it etc.

    It took me longer I'm sure to reply to you and give an idea of how things are generally done when theming. But since you did not bother telling us what you did and where , this discussion is more confusing than helping anyone and apparently even you. If you think it is sufficient to just say "Oh my bad I was ignorant never mind " It is not. because it makes this discussion and our time here pretty much irrelevant because there never was a solution for the question "How to modify the Content Asset" .

    If it was that simple, why can't you share the code you used, or answer the questions we asked you ?

    We asked you twice, why are changing classes.

    I asked you if you cloned the default theme and made a custom theme or edited the default theme, you never answered those questions. You wasted my time for that. I would have rather had seen some code or something to even understand why the hell you would ever want to change the classes for the default theme. There was no pay off after so much time and guidance and that is terribly disappointing to someone who wanted to know the outcome in detail via some css code you might have used. :poop:

  • @vrijvlinder

    I wasn't 100% sure i wanted to change classes, i was trying to understand how the content asset worked in order to modify it if i wanted to.

    For example, if i created a new category, how could i change the class that it would be getting automatically. In order to design my way around it.

    Either way, i worked i had to create borders in order to give it the look i wanted, whats what i did.

    I want to the class i wanted (that was in style.css), gave it a big thick border and changed the color, while also doing the border-radius for the round aspect.

    After reading what you wrote, it confused me even more with classes and IDs.

    I didn't give the outcome because no one asked me... i tried searching before opening a new topic, no one gave an answer.

    Also i answered all the questions everyone asked me... maybe you didn't read everything as well posts you were a little rude for some reason... i thanked everyone for trying to help me.

    If i can help someone, i will do so without a seconds thoughts. But i wouldn't share my entire code... it wouldnt make any sense.

    Basically (again...)

    • Added a background to the content, then looked for what div was being created for each category and did what i stated above...

    My first idea was incorrect (trying to change the table classes) and @R_J was pretty direct and made me understand that i didn't need to (and shouldnt) touch any php file.

    O.o

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    @Eriel said:
    @vrijvlinder

    I wasn't 100% sure i wanted to change classes, i was trying to understand how the content asset worked in order to modify it if i wanted to.

    And you were told to give a link and this would have been a one minute discussion with the answer for you. But for some reason you wanted to make us guess…

    For example, if i created a new category, how could i change the class that it would be getting automatically. In order to design my way around it.

    You could use the CategoryBg plugin or at least look at it to see how… you did not ask for that read your title again…"Modifying Content Asset" No mention of categories ...

    Either way, i worked i had to create borders in order to give it the look i wanted, whats what i did.

    How did you create borders ? Where is the code that will help someone else when they ask how to create a border ? Get my drift ? this is a forum where people help other people help other people and on and on...

    I want to the class i wanted (that was in style.css), gave it a big thick border and changed the color, while also doing the border-radius for the round aspect.

    And I told you to copy that code from the main style.css and put it into CSSEDIT plugin or your custom theme's custom.css file. Because it has priority over the style.css and you can override it.
    I also told you that you can add a class or Id to items that don't have a class or id. And also add an extra class to edit a specific item more in detail. That is easy to comprehend no?

    http://www.w3schools.com/cssref/sel_class.asp

    After reading what you wrote, it confused me even more with classes and IDs.

    Then read some more info , just shows how little you really understand about css , here is some help for that http://www.w3schools.com/css/css_syntax.asp

    I didn't give the outcome because no one asked me... i tried searching before opening a new topic, no one gave an answer.

    Are you kidding????

    Also i answered all the questions everyone asked me... maybe you didn't read everything as well posts you were a little rude for some reason... i thanked everyone for trying to help me.

    You never answered the questions about what did you do? How did you make your theme? Did you edit the default theme or cloned it with another name into your themes folder ?Why would you want to change class names?
    You did not answer that.

    If i can help someone, i will do so without a seconds thoughts. But i wouldn't share my entire code... it >wouldnt make any sense.

    Oh ? and how did you come by that conclusion ? Do you think we will laugh at the code ? ffs...

    • Added a background to the content, then looked for what div was being created for each category and did what i stated above…

    You did not state anything, code states what you did people can't guess, you helped no one but yourself and we don't know what you did as far as code that is what matter here.

    My first idea was incorrect (trying to change the table classes) and @R_J was pretty direct and made me understand that i didn't need to (and shouldnt) touch any php file.

    O.o

    No, he said not to edit any core files I can read.... You can edit php files java script files CSS files for plugins themes and applications but not the default files for Vanilla.

Sign In or Register to comment.