How to apply Muse (webfont) styles to BC Blogs/Contact Forms?

Hi all.
So my site (designed in Muse) is pretty much ready, except for my blog and a couple of forms. I've just gone through making it my partner site, replacing the so-called "bre-built" default site. That process was very, very simple, but BC Support told me it would be much more complicated than it needed to be - it wasn't! I was able to simply publish via Muse to my partner site domain and everything worked fine...
Anyway... Headers in my site use the "Bebas Neue" webfont selected from within Muse (I assume this is a Typekit font?), at 30pt and a custom colour #B10505. Body text is simply "Trebuchet" (a standard font) in black at 12pt. Now, I'm aware that not everything designed in Muse shows up "as shown" when doing any editing in the back-end of BC. I've just begun following through the tutorial for setting up BC modules on a Muse site and have gotten to the "Inspect Element" stage...
This is where I've hit a snag. This video: http://www.businesscatalyst.com/bc-blog/adding-business-catalyst-features-to-your-muse-sit es (with the blog part starting near the end of 19 minutes) clearly uses a standard font and not a webfont, so when I'm inspecting with Firebug, what's shown in the video doesn't show up the same in reality for me. This is because a standard font is applied in Muse designed sites where a webfont is in use, and the webfont simply "masks" the standard font (if I'm not mistaken?)...
I've read this topic: http://forums.adobe.com/message/5480712#5480712 which pretty much asks the same question I'm asking, but this guy clearly has more knowledge (or maybe more common sense) than me, so I'm asking it in a new topic here...
Can someone please walk me through (step-by-step) how to apply Muse selected webfont CSS styles to the relevant files in BC so that my blog shows up with a consistent look and feel to the rest of my site? I'll literally need every step walking through with minimal jargon if possible - this area of web design is not my forte!
I suppose I'd also like the same process walking through for contact forms if possible? Alongside the header font, I've got a custom styled, beveled button made on a standard Muse contact form that I'd like replicating on a BC-made form.
I'm sure once I understand this process, I'll be able to apply this to any BC module; I just need that initial helping hand that neither the BC team or the Muse team seem to want to reference in their tutorial videos!
Any help would be greatly appreciated! Thanks in advance!

Hi
So, are these links in lieu of a full walkthrough, to help me better understand until if/when you get the time to explain?
The cssbasics.com link isn't working, FYI.
Looking through the typekit page, it seems fairly straight forward. Is this the same set of fonts Muse uses?
If so, theoretically do I just need to copy the snippet of code from the typekit site for my desired font (Bebas Neue) and paste it into the modulestylesheet.css file? Where? At the bottom of everything else? Presumably commenting what it is? and define that I want to use that as a header font? Can you walk me through exactly what I need to put for that?
Then I guess I just need to follow the rest of the video tutorial I linked above?
Or is there a little more to it than that?
Would I need to do the same to define trebuchet as the body font, or is there a different block of code I need for that, since that's not a webfont?
Sorry for being so slow with it!

Similar Messages

How to apply a Character Style that's already been made in a template document?

First of all I'd like to thank everyone that helps. I'm a complete beginner at scripting and appreciate all your help.
I'm basically using GREP expressions to find patterns in a document and apply a Character Style which has already been made. This Character style was not made using script, but just in InDesign when making and setting up the template.
var myDoc = app.activeDocument;
//Clear the find/change grep preferences.
app.findGrepPreferences = NothingEnum.nothing;
app.changeGrepPreferences = NothingEnum.nothing;
//Set the find options.
app.findChangeGrepOptions.includeFootnotes = false;
app.findChangeGrepOptions.includeHiddenLayers = false;
app.findChangeGrepOptions.includeLockedLayersForFind = false;
app.findChangeGrepOptions.includeLockedStoriesForFind = false;
app.findChangeGrepOptions.includeMasterPages = false;
//GREP Expression for finding all HEADERS
app.findGrepPreferences.findWhat = ".+\n";
//Applying formatting changes to put into All Caps, Bold and changing the font size to 12 pt.
app.changeGrepPreferences.capitalization = Capitalization.allCaps;
app.changeGrepPreferences.fontStyle = "Bold";
app.changeGrepPreferences.pointSize = "12";
myDoc.changeGrep();
//Clear the find/change preferences after the search.
app.findGrepPreferences = NothingEnum.nothing;
app.changeGrepPreferences = NothingEnum.nothing;
This is how I currently have it. I will manually define the changes to the text. The problem is, each template uses a different set of fonts and not all of them use Bold e.g. Sabon can use CE Bold.
I would like to learn how to apply a Character Style and have tried looking around but nothing seems to work.
Any help would be much appreciated.
Thanks.

select the text where u went and run below script after change group as per ur template.
var myDoc = app.activeDocument;
var mySel = app.selection[0];
//Clear the find/change grep preferences.
app.findGrepPreferences = NothingEnum.nothing;
app.changeGrepPreferences = NothingEnum.nothing;
//Set the find options.
app.findChangeGrepOptions.includeFootnotes = false;
app.findChangeGrepOptions.includeHiddenLayers = false;
app.findChangeGrepOptions.includeLockedLayersForFind = false;
app.findChangeGrepOptions.includeLockedStoriesForFind = false;
app.findChangeGrepOptions.includeMasterPages = false;
//GREP Expression for finding all HEADERS
app.findGrepPreferences.findWhat = "role";
//Applying formatting changes to put into All Caps, Bold and changing the font size to 12 pt.
//app.changeGrepPreferences.capitalization = Capitalization.allCaps;
//~ app.changeGrepPreferences.fontStyle = "Bold";
//~ app.changeGrepPreferences.pointSize = "12";
app.changeGrepPreferences.appliedCharacterStyle=myDoc.characterStyleGroups.item("Style Group 1").characterStyleGroups.item("Style Group 2").characterStyles.item("Header")// Header is name of character name
mySel.changeGrep();
//Clear the find/change preferences after the search.
app.findGrepPreferences = NothingEnum.nothing;
app.changeGrepPreferences = NothingEnum.nothing;
If it's help then click yes
Mi_D

How to apply different CSS styles to different table cells?

I have an h:dataTable table and I would like to apply different CSS styles to different table cells depending on their content. If I were doing JSP I would probably have a <c:if> test on the cells, and give them a style name depending on contents, and then define the styles in a separate style sheet. Is there a way in JSF to do the equivalent? Thanks.

mitchgart wrote:
BalusC wrote:
How to achieve a cell-specific style is already answered in my 1st reply of this topic.That tells how to apply a style to the text (or other content) inside a cell but not how to apply a style to the <td> as a whole. It would work for something like text font or text color but not cell border.
I'm thinking I can mark the content somehow and then have javascript traverse the DOM, find marked content, and traverse outward to the enclosing <td>. Is there a better way?BalusC already spoke about rowClasses and columnClass attributes, I assume those are insufficient.
The Tomahawk dataTable component has the rowStyleClass and rowStyle attributes for assigning CSS to the HTML tr tag. One is allowed to reference the row data variable when assigning values to these. However, see https://issues.apache.org/jira/browse/TOMAHAWK-523 for workarounds to bugs in some implementations.
The Tomahawk column component has the styleClass and style attributes for assigning CSS to the HTML td tag. These also may reference the row data variable.

How to apply multiple paragraph styles to one sentence?

I'm using paragraph styles but is not helpful because I'm trying to apply 2 different styles within the same sentence which is not working.
To make it work I select the sentence, apply the style, for instance "xfont-regular" then I select the word within the sentence that I want it to have a different style and I choose from the font list maybe italic so that it looks "something like this"
Obviously by doing this, I'm loosing all the benefits of using p styles and of course it's so time consuming. Is there any way to break the sentence, keeping it in the same line, so that I can apply different styles to it? and still keep the benefits of just going to the styles and make the changes to the whole document that have that style applied.
Thank you

pchinique wrote:
I'm using paragraph styles but is not helpful because I'm trying to apply 2 different styles within the same sentence which is not working.
To make it work I select the sentence, apply the style, for instance "xfont-regular" then I select the word within the sentence that I want it to have a different style and I choose from the font list maybe italic so that it looks "something like this"
Obviously by doing this, I'm loosing all the benefits of using p styles and of course it's so time consuming. Is there any way to break the sentence, keeping it in the same line, so that I can apply different styles to it? and still keep the benefits of just going to the styles and make the changes to the whole document that have that style applied.
Thank you
As Diane King mentioned, nested character styles may work for your need. Her example was an initial dropped capital (multi-line first one or several letters of a paragraph.) Dropped caps are a specific type of nested style - always the first one or more characters in a paragraph, two or more lines high.
To use the general kind of nested style, you need to be able to identify the word or words within the paragraph that gets the nested character style. For example, the third word, or the first two words after the first semi-colon. If there is no pattern of word(s) that can be identified by position or sequence, it's possible that a GREP style can be used to find a common pattern of characters and apply a character style to it, for example a telephone number, date, or currency amount that's identified by a dollar sign, pound, or yuan.
Search InDesign Help and Google for "InDesign nested style," "InDesign grep style," and similar terms (without quotes) for details. There have been many discussions of GREP on this forum.
HTH
Regards,
Peter
Peter Gold
KnowHow ProServices

How to Apply A Font Style in Mail?

This seems like a simple question, but I can't seem to find an answer by searning this forum.
I'm new to Mail (recently converted over from Entourage). Quite often, the e-mails I compose are a hodge podge of cut and pastes from other messages and documents. The result is a mix of fonts and font formats.
I would like a simple way to highlight all of the text in a document and apply a single style. Essentially, I want a way to apply a single style to all of the text in a mail message.
I can't seem to find this in Mail. I've tried to "apply" the default style using the Format --> Style ... menu, but that doesn't work as expected (I don't think it changes anything). Looking up "Style" in the Help menu brings up nothing of help.
Any suggestions?

you could also select Verdana 12pt as your Fixed-width font and your Message font in preferences under fonts/colors, then check the box that says "use fixed-width font for plain text messages"
then you could select your text command-A, then Shift-Command-A (to convert to plain text) which would convert everthing to verdana 12pt, then if you wanted rich text message again, just press Shift-Command-A again and it will stay with Verdana 12pt but be a rich text message.
This would only be 2 and at the most 3 key combos with no mouse clicks to achieve what you mentioned in your previous post.

How to apply bold character style with grep

finding bold characters in a particular paragraph style
I want to apply a character style
app.findGrepPreferences = app.changeGrepPreferences = null;
app.findGrepPreferences.string = String.Bold;
if (app.findGrepPreferences.appliedParagraphStyle == myPar) {
app.changeGrepPreferences.appliedCharacterStyle = myCar1;
app.activeDocument.changeGrep();
app.findGrepPreferences = app.changeGrepPreferences = null;

Try this,
app.findGrepPreferences = app.changeGrepPreferences = null;
app.findGrepPreferences.fontStyle = "Bold";
app.findGrepPreferences.appliedParagraphStyle = "myPar";
app.changeGrepPreferences.appliedCharacterStyle = "myCar1";
app.activeDocument.changeGrep();
app.findGrepPreferences = app.changeGrepPreferences = null;
Vandy

How do you upload a document (PDF) with a contact form?

My website requires the viewer to be able to fill in a PDF form and upload the completed, signed form (not just the data) to us. Is it possible to do so from a contact form? If not, how does one do this with MUSE?
Thank you,
Laura

Hi Laura,
I am afraid that this is not possible in Muse at this stage, I will recommend that you post this on our ideas section over here, https://forums.adobe.com/community/muse/ideas, and let our devs team know of this requirement.
- Abhishek Maurya

How to create HTML fragment and PHP file for CONTACT FORM?

Hello!
I need to add a contact form to my website.
I don't want to use wufoo or similar.
Can someone write a code to have a form:
NOME:
MAIL:
MESSAGGIO:
and file .php ?
Regards.
Thanks a lot.

Where are you publishing your site to? If MMe, then MobileMe does not support php and you don't need php to create a contact form - just good old html.
If you are uploading to a server/host such as GoDaddy, then you can use the FormMail option too, but you still need to write your own html code - others will not do it for you.
I would suggest that you visit this site - http://www.w3schools.com. This site tells you about how to write html code for most things, including contact and feedback forms. Look at this and then write your own code from this.
If you can't manage to do it, then I would suggest that you need to use something like http://www.wufoo.com or GoogleDocs - Google Docs is a good alternative.
Also, do a search of this forum for contact or contact and feedback forms where you will find lots of questions on this and where you will then find code examples that have been linked to.
If you try it yourself, you will learn more quickly rather than asking others to do it for you.

How to apply a css style to a radio button.

I cannot seem to persuade jsf to pass css styles through to a radio button.
I have markup like this:
<h:selectOneRadio id="direction" styleClass="largish-form" >
<f:selectItem id="positive" itemLabel="positive" itemValue="positive" />
<f:selectItem id="negative" itemLabel="negative" itemValue="negative" />
</h:selectOneRadio>Which gets transformed into something like:

<td>
<label>
<input type="radio" name="comp-amount-form:direction" value="positive" class="largish-form" />
positive
</label>
</td>So the style does not get applied to the text of the label. I was expecting something like
<span class="largish-form"> positive</span>.So how do I get styled labels on my radio buttons?
Thanks in advance.

For a standard Portal page you should use the Portal styles and associate them to a page. These effectively generate a CSS style sheet anyway if you view the HTML source of a rendered page in your browser.
Using the correct PDK APIs you effectively reference the CSS tags in your Java or PL/SQL code.
If your portlet need to open a page in a new window you can no longer reference the Portal page style as the CSS style sheet does not get attached.
In this situation, code your HTML as normal and reference your CSS style sheets as normal.
If you create you CSS sheet you can store it in a page as a file and access using the direct access URL like I showed you in a previous response regarding the storing of images.
Cheers,
John

How to apply an object style based on paragraph style?

Have a job where a single page with a frame of 3 columns is repeated many times.
(It is always alone and behind a title page)
But this system is not very good if the text flows... Formatting is lost.
Obviously, anchored frames should be a solution but I could prefer apply a text frame definition (just the 3 columns needed) with the menu f/change:
Thus, my 3 columns page that have a style always will have this frame definition.
In anchored frames it is default to insert a return to get in the next page?

Olfarr,
Yes, it IS the most perfect solution.
I was trying with the worst method: a text frame + columns, but at the time a new text or a new page appear the text reflows and anything is lost.
This menu resolved all.
Thank you.

How to apply a css style to vbox.

I'd like to apply below style to vbox. But It's not changed.
When I use ID property, it's changed, But I want to use class property.
.v-box{
     -fx-spacing:10;
     -fx-alignment:center;
Edited by: shakddoo on 2012. 4. 20 오후 9:08
Edited by: shakddoo on 2012. 4. 20 오후 9:08

.v-box is not a standard css selector.
You could used VBox (capitalized exactly like that and without a leading .) and it will work because you can select based upon type name, for example:
VBox {
-fx-spacing:10px;
-fx-alignment:center;
}Alternately you can create your own .v-box class and assign it to your VBox and it will work, for example:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class CssSample extends Application {
@Override public void start(Stage stage) {
    VBox box = new VBox();
    box.getChildren().addAll(
      new Label("On either side the river lie,"),
      new Label("Long fields of barley and of rye,"),
      new Label("And through the fields,"),
      new Label("A road runs by,"),
      new Label("To many-towered Camelot")
    box.getStyleClass().add("v-box");
    StackPane layout = new StackPane();
    layout.getChildren().addAll(box);
    Scene scene = new Scene(layout);
    scene.getStylesheets().addAll(getClass().getResource("styledvbox.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
public static void main(String[] args) { launch(args); }
// styledvbox.css
.v-box {
-fx-spacing: 50px;
-fx-alignment: center;
.label {
-fx-font-family: "Comic Sans MS";
-fx-text-fill: salmon;
-fx-effect: dropshadow(one-pass-box, mistyrose, 10, 0, 1, 1);
.root {
-fx-padding: 200px;
-fx-font-size: 48px;
-fx-background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/83/JWW_TheLadyOfShallot_1888.jpg');
-fx-background-size: contain;
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-background-color: cornsilk;
}

How to apply inmath character style to fraction values

Hi
I try to apply inmath style to fraction values in indesign file.
My code here:
app.findGrepPreferences = NothingEnum.nothing;
               app.changeGrepPreferences = NothingEnum.nothing;
               app.findGrepPreferences.findWhat = myText;
               app.changeGrepPreferences.appliedCharacterStyle = "Fraction Answers";
   app.changeGrep();
But it throws error "Invalid value for set property 'appliedCharacterStyle'
Thanks
Sangeetha

Try this,
app.findGrepPreferences = app.changeGrepPreferences = null;
app.findGrepPreferences.fontStyle = "Bold";
app.findGrepPreferences.appliedParagraphStyle = "myPar";
app.changeGrepPreferences.appliedCharacterStyle = "myCar1";
app.activeDocument.changeGrep();
app.findGrepPreferences = app.changeGrepPreferences = null;
Vandy

How to apply a user style with the Stylish extension for Web Developer Tools?

I have firefox 27 and the fonts of Web Developer Tools (Inspector, Debugger..) are very small.
The fonts of Stylish editor are very small also.
Here https://support.mozilla.org/en-US/questions/943857 I found a similar question.
GingerBread Man said :
"If you need to modify anything else, you can use the DOM Inspector extension to examine user interface elements ("chrome"). "
My problem is that I can't find the names of elements e.g "chrome://browser/content/devtools/markup-view.xhtml"

@the-edmeister
Thanks for your reply.
The rule below affects only Inspector
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("chrome://browser/content/devtools/markup-view.'''xhtml'''") {
.devtools-monospace {
font-size: 120% !important;
I change the rule as you suggest.
@-moz-document url("chrome://browser/skin/devtools/markup-view.css") { ......}
It doesn't work.

How to make information sent to me in my contact forms secure

I use Dreamweaver CC and Business Catalyst.
I want to make sure the information people send to me in my contact forms is secure!
Does any one have advise for me on the best way I can do this?
Thanks

Use security protocols thorugh a secure server. Security certificates are around $100 annually.
But if all you are looking to do is to have a form send you an email, unless it contains credit card information or other information that could be used to steal someone's identity, I think it's probably a waste of money.
-Mark

Can you have multiple contact forms in a single Muse site?

I have a site created in Muse that needs to use multiple contact forms of a sort. One is a simple contact form. Two others are sign up forms. In two of the three forms I have to separate the First and Last names. Also in those there are multiple Custom fields and Message fields.
The original simple contact form is working fine and has been. However, I modified one of the pages by adding a second form, the first of the two sign-up forms. It looked great in Muse, but when uploaded to the site, all of the fields were gone, leaving only the Labels in a single paragraph.
Does this mean I can't have multiple contact forms in a single site? If I actually, can, then what might have caused the problem? And what could you suggest for me to try to fix it?
Thank you,
Laura

Thank you for the information, but I cannot find anywhere in help where to find the field names (if that is my problem). I changed all the labels and the corresponding text inside the field (remember, Muse does not give access to code as far as I can tell). When I preview the page in a browser (using FireFox as default, but also tried with IE), everything looks good. When I export to html and open the index.html on my computer, everything still looks great. But when I FTP the page to the website, this is what I get:
First Name:RequiredRescuer Email:RequiredOrganization (if any):RequiredSubmitting Form...The server encountered an error.Form received.Geographic Areas Covered:RequiredRescuer Cell Phone:RequiredRescuer Home Phone:RequiredRescuer Home Address:
RequiredRescuer City:RequiredRescuer State:RequiredRescuer Zip code:RequiredRescuer Country:RequiredVeterinarian Name:RequiredVet Address:RequiredVet City & State:RequiredVet Phone:RequiredRequiredServices Offered:RequiredAdditional Info About You:Required Rescuer (available to general public) RequiredVolunteer (available only to Rescuers)RequiredPhoneRequiredEmailRequiredOtherRequiredLast Name:RequiredImage Verification:Required
How would you prefer to be listed?
How would you prefer to be contacted?
However, this is how it looks on the preview:
So, what is my problem? And how can I fix it?
Thank you,
Laura

How to apply Muse (webfont) styles to BC Blogs/Contact Forms?

Similar Messages

Maybe you are looking for