Edit text files under Pages > Media

[WebCMS]

When we upload CSS or JS files under Media, there is no way to edit them other than replace them. When we replace them, it generates a new _cb=xxxxx (maybe version number?).

Can we ignore the _cb=xxxx and just the file name part of the URL while using the file or just use the {media=xx} tag?

In any case, being able to edit the file in-place instead of re-uploading/replacing with an updated version will be easier (similar to how the file content is edited in Themes > CSS). This way, we don't have to maintain a copy on our disk.

[opentype]

What’s the use case? Why are you storing JS or CSS there to begin with? 
It’s really only made for reusable “media” as the name suggests. 

[WebCMS]

To centralize all CSS into a single file instead repeating/editing CSS across all themes redundantly every time there is a change (which can go out of sync due to redundancy)

Edited January 9 by WebCMS

[opentype]

The Pages section is for anything related to the Pages app. Pages CSS and JS goes into ACP → Pages → Templates → CSS/JS. Everything you need regarding editing and updating is already available there. You don’t need to manually upload or replace files anywhere. 

[WebCMS]

I need common/reusable CSS for the entire site and per previous conversation, it was made clear there is no such provision and the only way to add CSS for the site is to add it at the theme level for each theme.

[Clover13]

If it's for themes, you can create a Parent theme and then Child themes and use the custom.css file to configure parent CSS (global across all themes) and then individualize/override anything at the Child level theme.  

Edited January 9 by Clover13

[Clover13]

Can you define "entire" site?  Is IPS is only part of it or is the entire site just IPS and thereby controlled by the IPS theming?

[WebCMS]

2 hours ago, Clover13 said:

Can you define "entire" site?  Is IPS is only part of it or is the entire site just IPS and thereby controlled by the IPS theming?

Entire site I meant forums, clubs, blogs, articles, pages, events, etc. (not just pages/articles)

2 hours ago, Clover13 said:

If it's for themes, you can create a Parent theme and then Child themes and use the custom.css file to configure parent CSS (global across all themes) and then individualize/override anything at the Child level theme.  

Oh, I did not notice there is a parent-child relationship between themes. Will try that as it seems most optimal.

Edited January 9 by WebCMS

[Clover13]

6 minutes ago, WebCMS said:

Entire site I meant forums, clubs, blogs, articles, pages, events, etc. (not just pages/articles)

Oh, I did not notice there is a parent-child relationship between themes. Will try that as it seems most optimal.

I use it quite a bit in my own sites for managing overall CSS I want common across all child themes, but then have underlying customizations for individual themes (like a non responsive theme as some members oddly prefer that even on mobile devices or a theme with no ads, etc).

[Marc Stridgen]

Parent/child themes is indeed what you would want to use there if you have CSS changes that are common across the board. But yes, as mentioned above, pages media is not the area you would be wanting to achieve this.

[WebCMS]

Yeah, this is what I was looking for months and it is the optimal solution.

[WebCMS]

I've tried creating a master theme with custom CSS and assigning the master theme as the parent of another/child theme but it doesn't work and does not use the custom CSS from the parent theme when the frontend is loaded up with the child theme. Basically it has to markup the parent CSS followed by child CSS in the HTML but apparently, it doesn't markup parent CSS as none of the parent's CSS is rendered while using child theme.

Please advise...

[Clover13]

Give an example of what you're trying to do exactly?  

[WebCMS]

EXAMPLE

Master theme CSS:

.someElement {font-weight: bold}

Child theme CSS:

.someElement {color: red}

Master is assigned to child theme. When child theme is switched in the frontend, someElement is red but not bold.

 

 

When Child theme is chosen in the frontend, none of the custom CSS from the Master is rendered. Tried with both Manual Mode and Easy Mode themes for both Master and Child and also made Master theme accessible to users but none worked. It only renders what's in the child theme CSS and what's in the child theme's Button Colors, Front-end Colors, Text, etc. tabs (but nothing from Master theme).

TIA

Edited January 14 by WebCMS

[Clover13]

It does work for me, but you may need an !important at the end depending on the element and what else is set where an embedded element might take precendent?

Example that works for me to show the differences when using two different properties.  Look at the list of forums under each theme.

Parent:

.cForumList .ipsDataItem_title {
    font-size: 28px;
}

Child:
.cForumList .ipsDataItem_title {
    background: green;
}
 

Edited January 14 by Clover13

[WebCMS]

Parent theme has most of the CSS (more than 95%). Not sure why it is not working even when the CSS that is not overridden by the child theme is not loaded from the Parent. Only the child theme's CSS is getting rendered.

Somebody from the IC Team, please look into this.

Parent (copied from another theme) or Parent2 (created from scratch) and Lavender2 for child.

Even though the CSS in Parent and Parent2 is the same, loading up Parent theme in the frontend loads its CSS but loading up Parent2 theme does not load "any" CSS and the page is all garbled. Maybe file-write permission issues? Loading up Lavender2 child (after assigning its parent theme) uses the CSS only from the Lavender2 child but does not use the CSS from its Parent.

Edited January 15 by WebCMS

[Marc Stridgen]

Do you have your site set to store template files on disk? If so, try switching that off

[WebCMS]

4 hours ago, Marc Stridgen said:

Do you have your site set to store template files on disk? If so, try switching that off

My site is on IC cloud and System > Files are all set to S3 including Theme Resources (CSS, JS, images).

Under Configurations, it says, "STORAGE METHOD File System: /var/www/html/107724/uploads Files cannot be stored on the filesystem for Community In The Cloud clients"

Is there any other setting I should be looking at?

[Marc Stridgen]

Looking at the parent2 theme there, you look to have copied a large chunk of the CSS into custom there, and appears there is a mistake there causing things not to loan correctly.

 

In terms of the lavendar one, does this work if you are not using easy mode?

[WebCMS]

Validated the CSS of Parent2 theme here and it shows no errors

https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input

All themes work in Easy Mode and Manual Mode on their own except Parent2.

Regarding Lavender2, I moved most of its code into Parent2 but Parent2 doesn't work on its own (garbled, CSS not used) which may be the reason its child Lavender2 does does not use Parent2's CSS.

There is a Parent theme which works fine on its own but we assign this as the parent of Lavender2, it still does not use Parent's CSS 

Parent is Manual Mode while Parent2 is Easy Mode and their CSS is identical.

parent-child relationship doesn't seem to work as expected using either Parent and Parent2.

[Marc Stridgen]

16 minutes ago, WebCMS said:

parent-child relationship doesn't seem to work as expected using either Parent and Parent2.

Im a little confused by this statement. Parent2, is not currently a parent of any other theme, nor child of any theme. 

 

[WebCMS]

2 minutes ago, Marc Stridgen said:

Im a little confused by this statement. Parent2, is not currently a parent of any other theme, nor child of any theme. 

Parent2 is currently assigned as Lavender2's parent and these themes are created for testing purposes.

Most of the code from Lavender2 is moved into Parent2.

There is also a Parent1 theme for testing purposes that can be assigned to Lavender2's parent (still doesn't work).

Both Parent1 and Parent2 have identical CSS.

Parent2 is Easy Mode created from scratch and renders the page garbled when loaded/switched in the frontend.

[Marc Stridgen]

There has certainly been an issue with parent2 creation. I would advise removing that theme entirely. Please place lavendar 2 under parent 1, and let me know what it is you have tried to override there, that you believe hasn't been overridden.

 

 

[WebCMS]

32 minutes ago, Marc Stridgen said:

There has certainly been an issue with parent2 creation. I would advise removing that theme entirely. Please place lavendar 2 under parent 1, and let me know what it is you have tried to override there, that you believe hasn't been overridden.

Blew off Parent2 theme.

Assigned Parent1 as parent of Lavender2.

Loaded Lavender2 in the frontend but the Parent's CSS is not getting used.

For instance, the FluidFilters widget should be 600px max-height with a scrollbar. The topic list and all other lists should have a row highlight on mouse hover. Menu highlight colors are messed up. There are many more properties in the Parent2 theme but these 3 are just examples. These don't render even though the CSS for these properties is in Parent1's theme but don't get used.

I'm not even looking at "overriding" logic right now because the Parent1's CSS doesn't even render where it is not overridden. For instance, these are not overriding each other and Parent theme's CSS should render -

Parent theme CSS:

.someElement {font-weight: bold}

Child theme CSS:

.someElement {color: red}

I don't think overriding logic will be a problem because the Lavender2's CSS is getting loaded properly (if we can make the Parent1's CSS load properly).

Loading up any other theme in the frontend works fine because all the CSS is contained within them and don't have any parent theme.

Edited January 15 by WebCMS

[Jim M]

When you create a Child theme, the Parent theme's CSS files will now be in the child. This means that if you make any modifications to the Child's theme CSS files, you could be removing the parent theme's CSS. 

You may wish to create a CSS file called "parent" in your Parent theme and "child" in your Child theme. You can then use CSS as you are wanting to here.

In the example above, the white color is in my parent theme CSS file and the black color is in my child theme CSS file. I am able to use cascading just fine 😉