I have an asp.net MVC website, that based on a value in it's web.config can be in multiple languages. For example, if i choose it to be in English then the html tab at the top will read
<html lang="en" dir="auto">
if i choose arabic it will read
<html lang="ar" dir="auto">
this works great for the most part, but there are definitely things in my global css file that need to be customized based on the actual 'dir' direction. Is there a way to customize my css/scss file to act differently depending on the dir value? can i perhaps find out what the dir value is and instead just have mulitple css classes (.menu_Left , .menu_Right) and append that value?
Or do i just need to make my own enumeration (here are the languages where dir=auto will move to the right) and do everything by hand? I'm just trying to see what is the easiest way here.
What about html[lang="ar"] .menu_left { /* insert rules */ }? That being said, you should maybe load different CSS files per language. That way the files are smaller, your performance is better and you don't have this problem to begin with.
Related
I have several large CSS files and making a change can sometimes take a few minutes just to find the right selector to change. I would like it if there was a nice ModX editor for CSS, but I haven't been able to find one. I am willing to settle for splitting up my files into parts, as long as my site still renders. Can I do that and how? If there is a nice editor (plugin?) instead, where can I find one?
I guess the real question is what kind of parts are acceptable for you. If you follow this question, you can begin the process of allowing ModX to manage your CSS. Once this happens, your options open considerably. Your CSS editing will then become easier and less time consuming depending on your level of expertise with ModX. This answer will be pretty simple, as it will show simply how to add a given selector as a resource. Other further development can be intuited from here, though.
CSS as a Resource
Once your CSS is being managed as a Resource (which takes about 15 minutes), you may utilize Templates, Template Variables, Chunks, Snippets and Plugins. Thisis actually pretty amazing, but setup can be a bit of a pain. You will basically be investing some time to save a lot of time in the future. The next logical step is split your Selectors accordingly, but you don't want to break what currently works. Having a fluid understanding of the getResources addon will be crucial to further development.
How to do it:
1. Create a new chunk
Click the Elements tab, and click "New Chunk". Name it "css-selector". Set the content to:
[[+pagetitle]] {[[+content]]}
It's as simple as that. Don't forget to click "Save"! This will let you set a Selector as a resource. It will use the title for the selector and content for the rules. You can forget about using those braces any more. Your new chunk will handle those from now on.
2. Adjusting your Template
Now, we just have to convince the template that it nows how to read parts, as well as not forget the whole. Open your CSS Stylesheet template (the one that says [[*content]] for its content). Adjust the code so that it has the following:
[[!getResources?
&parent=`[[*id]]`
&depth=`1`
&tpl=`css-selector`
&includeContent=`1`
&sortby=`menuindex`
&sortdir=`ASC`
&limit=`99`
]]
[[*content]]
Again, click "Save". Let me explain the Template real quick. If you have child, they'll get rendered first depending on their menu index. Further, it will render the contents of the document that are not children afterward. This will allow you to only make new resources for your most important selectors, while keeping the stuff that will never change in the main resource.
3. Create a new Template
This is so that your selectors don't do anything funny and just render the content. Create a new Template named "CSS Selector". Set its content to:
[[*content]]
4. Create a new Resource
Create a new Resource. Set the title to the selector for the css statement you want to manage. Then set the content to the rules without the braces. For instance, if your css statement is: div#header .logo {border:0;}, you'll set the title to div#header .logo and the content to border:0;. Set the resource alias to whatever you want. I use numbers for each one. Set the template to your new "CSS Selector". Important Now, set the Parent Document to your Stylesheet. Click Save.
5. Testing the Stylesheet
First, Right-click your new resource and choose "View Resource". This will just make sure that the statement was rendered correctly. It should simply say your rule in CSS format.
Next, Right-Click the Stylesheet resource and choose "View Resource". You should see the Selector at the top and all of the other rules below it.
Final Considerations
Observations
You'll notice that your child resources do not have to be changed to "CSS" for Document Type. Only the parent stylesheet has to be. This allows for some neat stuff as your expertise with ModX grows.
You can change the order of rules by simply changing the menu index of them.
The number of rules that can be done this way is based on the &limit variable in the getResources statement in your template. &limit applies to each stylesheet, so in this example you have 99 statements per stylesheet that may be separate resources.
A Note on Server Load
This will place load on the server as the number of resources goes up. For development, keep the "do not cache flag" (!) on your getResources statement. Once you are done, remove the exclamation mark and let it all be cached. This will save a ton of load.
Further Development
I added an isEnabled template variable to mine so I can turn on and off each rule as I pleased.
You may possibly begin to manage your CSS on the front-end utilizing FormIt.
Custom Manager Pages may even be a better option for you.
Further abstraction might allow you to create Groupings of statements for even further organization.
Hey, anyone have any idea what the best way to allow users to save custom css would be? Specifically, there are about 4 color values that I would like to allow a user to choose and these colors would be used to create a custom theme for the user. I'm thinking save values in the database and then using dom:loaded with prototype to set the custom style values but I'm wondering if theres a faster way? Like dynamically creating css files or something?
and then using dom:loaded with prototype
Awww, don't do that! That won't work when JavaScript is turned off.
Approach 1: Static stylesheet, dynamic values in document head
For the sake of not having to work with a dynamically created style sheet, have a separate, static CSS file with all the definitions that won't change.
<link rel="stylesheet" href="styles/static.css" type="text/css">
<!-- Or whatever you name it -->
All the definitions that will change, you could put into the head of the HTML document, fetching the user-changeable values from a database.
<style type="text/css">
.classname { font-size: (fontsize); } <-- Insert dynamic value here
.classname { color: (color); } <-- Insert dynamic value here
....
<style>
that way, the majority of the CSS stays in static, cacheable files, while the dynamic part won't cause another HTTP request.
Approach 2: Dynamic stylesheet
If you have a lot of dynamically changing values, put the entire style sheet into a script file and output it, replacing placeholders with the values from the database.
The downside to this is that to force the browser to reload the style sheet on changes, you'll have to work with a version approach stylesheet.css?version=400 which is pretty complex to do, but can sometimes be more desirable than littering the head section with CSS.
You decide which approach suits your situation better. I find myself choosing the first one most often.
I would save the 4 values in the database and then create a css file from those values. You would want to make sure and cache the created css file for each user so you don't have to dynamically create it each page view.
Creating a custom css file adds another request the browser has to make so you would need to make sure your setting up the headers correctly to cache it. If the user does change their settings you would need do something to ensure the browser immediately stops cashing the old css file and loads the new file. One way to do this is to change the url of the css file.
Example:
/usercustom.css?version=(last saved date hash)
Instead I would use your first approach and create a JSON array that you inject into the page and then you use your javascript framework to load and use the array to style the page.
You could also store the color values in the cookie from the server and use and or write to them on the client.
I think that best way is to save it to Db, because you don't want to allow user to mess with your website. At least if some pages are public.
And I personally think that answers like "do it without JavaScript" is nothing but old school BS... Did they tried to turn of JavaScript today? I don't think so... And by this paragraph I don't mean that you have to do it using JavaScript. Do it in a way that suits your needs 🤔
Wish you nice Day
My theme has a custom css code block where I allow the site owner to add any custom css they need directly to the head section of the theme. This inserts whatever they've placed in this block into the wordpress database as a custom option insert.
I then retrieve this content into header.php and output it between an inline style tag like so...
<style type="text/css">
.test h1 {}
.testcss2, .somecss {}
</style>
This works perfectly fine, however, I would like to clean up and minify the markup when its written to the database. I suppose a regex is needed to do this? If so, what would that be?
The result I'm looking for, when the code is written into the page's markup is...
<style type="text/css">.test h1{}.testcss2,.somecss{}</style>
I'd also like to reverse the minified markup when its presented back to the user to edit in my theme options. In that view, I just want to reformat the minified css code so that each directive is back on its own line.
It depends what you want achieve by doing this. I agree with #thomasfedb that you will likely messup the style of most peoples CSS by doing this transformation and will likely cause more trouble than its worth.
It's my suggestion that you keep the data exactly as the user entered it, and then 'minify' it when you render it to the page.
This will not save you and storage in your database, and it will increase your CPU usage per page render, but it will save you the bandwidth of all the extra new-line characters.
Another option, presuming database storage is not much of a concern, is to store the data twice, once where the user edits, and once minified. Then simply minify and copy the user-editable field into the minified field whenever the user makes any changes.
I don't see any real reason to do this, a few newline charactors in a webpage isn't realy going to cost you very much page-weight.
Therefore my solution would be: don't.
Also, even if you reverse the minification, you might 'mess with the style' of some people, who like different css layouts.
I generate an XHTML document and set the Mime type as "application/msword" so it opens in Word.
To create a header I appear to have to reference an external file thus:
<style>
...
#page{mso-footnote-separator:url("**OUT_files/header.htm**") fs;
mso-footnote-continuation-separator:url("OUT_files/header.htm") fcs;
mso-endnote-separator:url("OUT_files/header.htm") es;
mso-endnote-continuation-separator:url("OUT_files/header.htm") ecs;}
#page Section1{
mso-header-margin:.5in;
mso-header:url("OUT_files/header.htm") h1;
} }
...
</style>
Does anyone know how to reference a div defined within the main XHTML document itself, without having to reference an external file?
Thanks
MS Word is quite locked down. I was not able to get this to work with a non-external file, but it seems to make sense. The values being "included" are repeated in the display. It's not possible to have "hidden" divs and refer to them (at least, not when I was trying), so not sure how to get this to work properly.
For me, I ended up just creating a simple Macro that would handle this for me.
If you are very lucky, a data: URL might work, maybe, in Word 2007? I haven't tried that myself, but MS introduced partial support for data: URLs in IE8.
I have a legacy application that I needed to implement a configuration page for to change text colors, fonts, etc.
This applications output is also replicated with a PHP web application, where the fonts, colors, etc. are configured in a style sheet.
I've not worked with CSS previously.
Is there a programatic way to modify the CSS and save it without resorting to string parsing or regex?
The application is VB6, but I could write a .net tool that would do the css manipulation if that was the only way.
You don't need to edit the existing one. You could have a new one that overrides the other -- you include this one after the other in your HTML. That's what the "Cascading" means.
It looks like someone's already done a VB.NET CSS parser which is F/OSS, so you could probably adapt it to your needs if you're comfortable with the license.
http://vbcssparser.sourceforge.net/
One hack is to create a PHP script that all output is passed through, which then replaces certain parts of CSS with configurable alternatives. If you use .htaccess you can make all output go through the script.
the best way i can think of solving this problem is creating an application that will get some values ( through the URL query ) and generate the appropriate css output based on a css templates
Check this out, it uses ASP.NET and C#.
In my work with the IE control (shadocvw.dll), it has an interesting ability to let you easily manage the CSS of a page and show the effects of modified CSS on a page in realtime. I've never dealt with the details of such implementations myself, but I recommend that as a possible solution worth looking at. Seeing as pretty much everyone is on IE 6 or later nowadays, you can skip the explanations about handling those who only have IE 5,4,3 or 2 installed.
Maybe the problem's solution, which is most simple for the programmer and a user is to edit css via html form, maybe. I suppose, to create css-file, which would be "default" or "standart" for this application, and just to read it, for example, by perl script, edit in html and to write it down. Here is just the simple example.
In css-file we have string like:
border-color: #008a77;
we have to to read this string, split it up, and send to a file, which will write it down. Get something like this in Perl:
tr/ / /s;
($vari, $value) = split(/:/, _$);
# # While you read file, you can just at the time to put this into html form
echo($vari.":<input type = text name = ".$vari." value = ".$value.">");
And here it is, you've got just simple html-form-data, you just shoul overwrite your css-file with new data like this:
...
print $vari[i].": ".$value.";\n";
...
and voila - you've got programmatical way of changing css. Ofcourse, you have to make it more universal, and more close to your particular problem.
Depending on how technically oriented your CSS editors are going to be, you could do it very simply by loading the whole thing up into a TextEdit field to let them edit it - then write it back to the file.
Parsing and creating an interface for all the possibilities of CSS would be an astronomical pain. :-)