I'm not sure if this is the best forum to ask this in, but I need to style a magento theme and I'm just wondering how dependent is the javascript on the class names?
For example, I have something like this in my template file (inside my theme file, overriding the base)
<form action="<?php echo $this->getFormActionUrl() ?>" method="post" id="newsletter-validate-detail">
<div class="block-content">
<div class="form-subscribe-header">
If I say, leave the ids alone, but change the class names to something else (i.e. remove "block content" or "form-subscribe-header") will this break the javascript in Magento?
Also, is there an easy way to tell if I've broken something? Will I just get a console error if a piece of javascript was coupled with a css class name?
Search your javascript files for your class names to see if they are used by the script. You could also just leave your classes as they are but add a new one in, like this:
<div class="form-subscribe-header new-class">
Then target the class using .new-class
And yes, any javascript errors will appear in the console.
Related
I stupidly added some inline style to my theme files with the intention of moving them to the stylesheet using classes. That was before the holiday. The styles are rendering on the page, but I have scoured every file in my parent and child theme and these inline styles do not exist. It's almost like they're permanent. Please help.
http://cannabisediblesanddrinkreview.com/
<div class="site-branding" style="margin-bottom: 73px;">
http://cannabisediblesanddrinkreview.com/contact
<div class="custom-header" style="margin-bottom: 73px;">
There is a javascript file named global.js in "twentyseven-child/assets/js" which contains a function named "adjustHeaderHeight()". In there the margin-bottom of those two elements is set to navigationOuterHeight (a variable defined in the same file, further up). Most likely that function is adding those style attributes
Looking at the HTML I notice it's rendered with an error style="margin-bottom: 73px;", instead of style="margin-bottom: 73px". Unless you manually entered this with the error, try searching your entire project folder using an IDE or a code editor to find and replace the string 'style="margin-bottom: 73px;" '.
If you find nothing then you'll have to adjust your search to include what that PHP code might look like. ie ...style="<?php echo 'margin-bottom: 73px;' ?>">
Im looking at the Joomla Beez templates index.php file, and I come across this.
<jdoc:include type="modules" name="left" style="beezDivision" headerLevel="3" />
What is beezDivision? Theres no mention in the related CSS, and Ive grep -in 'beezDivision' * -R with nothing resulting other than a few lines very similar to the above one showing up (all in the templates/beez/index.php file). I imagine its used somewhere internally, but havent had luck finding out what it does. Possibly something new to me for CSS?
I havn't looked into how the style attribute is being used in the Beez template but the attribute value refers to the chrome style used to wrap the output generated by the module:
http://docs.joomla.org/What_is_module_chrome%3F
Confirming jessedb's answer - /templates/beez/html/modules.php contains a function to generate a custom module style with the appropriate name.
I have been using CakePHP for a while and recently needed to send emails from an app. Unfortunately I can not figure out a way to tell CakePHP to include the css directly in the document as an internal style sheet instead of a link. I know people think that is a bad idea, but my app is only sending emails to our company so I'm not worried too much about someone's email client messing it up. If I just include the link it doesn't work since the reference is wrong, although if I could make the link an absolute link (http://myserver/css/myfile.css instead of /css/myfile.css) that would be a 2nd best alternative since they would have access to my server.
If there isn't a way to do it in Cake, is there a quick way to just use PHP to read the contents of the file and dump it in the view? I guess I could do that from the controller, sounds like a bad hack though.
Any ideas would be appreciated, thanks
You could use readfile() to print the file content directly in your view.
Or you could $this->Html->url('css/yourcss.css', true) to get the full path to the file and pass it too the css method.
I would like to suggest you to use php variable as style class and use it directly as css class. For example.
$class1 = "border : 1px solid #eeeeee; font-family : font1, font2, font3; color : #785634;"
And use it in your email template as
<div id='my-div' style=<?php echo $class1; ?>>Your div content </div>
Even I do not know any way to include style sheet in the email, and if you create some classes those will not work in email templates.
So this is how I'm using css in my projects.
you can put the css in email layout like normal html (use html email layout)
<style type="text/css"></style>
Reviewing the code of the htmlHelper shows that it can't be done.
However, you can change or overload the helper; to do so in the simplest way just add a new option between line 371 to 378.
I used PHP's include function enclosed in a script tag and it worked perfectly! In the default email view:
<script>
include('css/your_css_doc.css');`
</script>
You can write css inline:
<h2 style="color:#818381">Here are the latest stories everyone's talking about...</h2>
I am a total beginner so pls be patient with me if my question might sound too dumb.
I am studying html, css, basic native php, and cakephp at the same time (which is not a good idea, I think its better to master the native cakephp first before jumping to any framework). As far as I know classes and ids are for css styling until I stumbled upon this code when I am studying cakephp:
<div class="posts index">
.
.
.
</div>
Note: I scaffolded a Post
I tried to look in the default css of cakephp for the class "posts index" but I can't find it so I concluded that there may be other uses of html classes aside from css. I am not sure about. I am just guessing. Can somebody explain to me in general about html classes. I also wanna know about the class "posts index" regarding its significance to cakephp. Pls help...
first of all you have to separate your "business logic" (program logic) and your "view" (output). The logic is done by your php code, it doesn't matter whether you use a framework or not. Your output can be html, xml, wml or some other stuff and is generated by your logic, your php code.
-> The class definition is only relevant in your output, so it doesn't matter for your cakePHP!
Next, there's no syntactic rule that every class in html must be defined in css. So your conclusion uses a rule that does not exist :-) It is not nice code because you have unused and needles html code, but it is not wrong. Most frameworks and tools use such "default classes" because of template support. Look at the html code of wordpress templates, there you will find these classnames, too, to make it more easy to change your css files to get different look&feels. When you create a new template with css styles, you know that the "posts index" element contains post-entries...
You can use classes and ids in JavaScript to get and identify elements, but this belongs also to the output/client-side area.
BTW: if you parse your html with some php code and need the class definition to identify an html element in the DOM then it matters, but I don't think you want do this ^^
I am working on an Ubercart installation on a Drupal site we are producing. Everything is going smoothly, but I am now trying to setup the order page template (uc_order module), so that the frontend developers can style it up.
The page is the one you view when you go to user/[UID]/order/[ORDER-ID].
I understand how to use hooks, preprocess, theming and template functions within Drupal, but currently I cannot see a way of changing any of the markup on the "order panes" that make up the page. It goes without saying that I don't want to touch any of the module's code.
So, one of the pages is the 'Bill To' address pane:
<div class="order-pane pos-left">
<div class="order-pane-title">Bill to: </div>
Name<br>
Address<br>
Town<br>
Postcode<br>
</div>
Essentially I would like to put a class in the div, so that it looks like this:
<div class="order-pane pos-left bill-to">...</div>
<div class="order-pane pos-left ship-to">...</div>
<div class="order-pane pos-left payment">...</div>
<div class="order-pane pos-left comments">...</div>
...
I just cannot see a way of doing this.
Any help would be much appreciated.
Have you checked the latest version of UC? The release note states:
The biggest change, though, is that order invoice templates now use the theme system to allow customizations. Instead of altering the module files directly, it is now correct to override them in the theme, just like node and page templates.
...and if I am not mistaken (a few months have passed by since I worked with UC), the invoice IS the page displayed by the URL you provided.
If my memory failed me (I haven't a UC installation handy to verify myself), a possible workaround (admittedly far from elegant, but still allowing you not to change the module's code) would be to alter the HTML with jQuery once the page has been loaded.
A more hack-ish workaround would be to maintain your own page callback for that URL, and just alter the menu definition in the UC code [yes, it's still hacking the code, but in this case you just need to modify one line in the UC code, and can maintain your code in a separate module].
HTH,
Mac.
You can create youre own panes or a single pane for everything, look up hook_pane, or you can insert the classes using jquery.