CSS Div Element Question

Question

gackerman43 0 Newbie Poster

17 Years Ago

Hi,

I'm trying to make the following div element I found using firebug not appear through CSS. What code should I add to my CSS stylesheet? I'm assuming it's display:none but don't know where to add it.

<div dojoattachpoint="_embedGroupButton" class="embed_group button">Embed</div>

Any help would be appreciated!

Thanks

html-css:bootstrap user-interface

3 Contributors
4 Replies
109 Views
4 Days Discussion Span
Latest Post 17 Years Ago Latest Post by MidiMagic

Dani AI

Generated 10 Months Ago

A few clarifications and practical tips that explain what happened and give cleaner alternatives.

The element in the OP has two classes on the same DIV and a dojo attribute. A selector that uses a space looks for a child element and will not match a single element that has both classes. A more precise selector that targets the same element (no space) is usually the simplest fix:

.embed_group.button {
  display: none;
}

If classes might change or you want to be explicit about that specific widget instance, target the attribute that Dojo uses:

div[dojoattachpoint="_embedGroupButton"] {
  display: none;
}

Where to put this and other gotchas: put the rule in a stylesheet that loads after the widget's CSS (external CSS files must contain only CSS — do not wrap them in <style> tags; include them with a <link> in the document head). Use the browser inspector to check the "matched rules" and computed styles to see if another rule (or an inline style with higher specificity) is overriding yours. If the widget injects or re-adds the node after load, either run a small DOM-ready script to remove/hide it or use a MutationObserver to react to changes.

Notes tied to earlier replies: 's descendant selector and the id-with-spaces example were the source of confusion — IDs cannot contain spaces, and descendant selectors are different from compound class selectors. 's warning about style tags applies in the wrong place — put <style> blocks in HTML only, not inside .css files. ultimately solved it; prefer a precise selector over a blanket !important when possible.

All 4 Replies

Airshow 425 WiFi Lounge Lizard

17 Years Ago

Gackerman,

You could use an inline style like this:

<div dojoattachpoint="_embedGroupButton" class="embed_group button" style="display:none">Embed</div>

or put the style in a style sheet:

<style type="text/css">
.embed_group button { display:none; }
</style>

As this would apply to all elements with class="embed_group button" , you could alternatively give the element an id as follows:

<div id="embed_group button" dojoattachpoint="_embedGroupButton" class="embed_group button">Embed</div>

and amened the style sheet as follows:

<style type="text/css">
#embed_group button { display:none; }
</style>

Put the style sheet within your document's <head></head>

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gackerman43 0 Newbie Poster · Answer 1 · 2009-07-25T06:30:09+00:00

Thanks! I tried to add this into my CSS:

<style type="text/css">
.embed_group button { display:none; }
</style> 

It didnt seem to work. Would you be able to tell me were to add it in the following CSS?

/*Add and edit the following classes to change width of the embedded group */

.tweetizen_embed {
     width: 595px;  
}

.tweeter .tweet_content_container {
     width: 590px;          
     height: 140px; }

.tweeter .tweet_content_container .tweet_text {
     width: 560px;          
}

.tweet_list .header .title {
     width: 330px;          
}

.tweet .tweet_information {
     width: 490px;          
}

.tweet .text {
     width: 490px;          
}

/*Add and edit the following classes to change the fonts, colors and margins of the embedded group*/

.tweetizen_embed {
     margin: 5px;
     margin-bottom: 15px;
     background: #;
}


.tweeter .tweet_content_container {
     background: #42A7FD;
     margin-left: 2px;
}

.tweeter .tweet_content_container .tweet_text {
     color: #000;
     font-size: 14px;
     height: 70px;
     border: 1px solid #5d5d5d;
     margin: 15px 10px 5px 10px;
}


.tweet .tweet_information {
     padding-left: 10px;
     line-height: 16px;
}

.tweet .text {
     font-size: 12px;
     line-height: 17px;
}

.tweeter .people_container .people_collection {
     margin: 0px 5px 0px 5px;
     width: 170px;
     letter-spacing: 1px;
}

.tweet_list .header .title {
     font-family:Helvetica,Arial,sans-serif;
     font-size: 12px;
     color: #202020;
     font-weight: bold;
     text-shadow: #fff 0 1px 1px;
     padding: 7px 0 0 5px;
}

.tweetizen_embed, .dijitDialog {
     font-size: 12px;
     font-family: Lucida Grande, Verdana, Lucida Sans Regular, Lucida Sans Unicode, Arial, Verdana, sans-serif;
     color: #1b1b1b;
}

.tweetizen_embed .footer {
     border-top: solid #CCCCCC 1px;
     padding-top: 5px;
}

.tweetizen_embed .powered_image {
     margin-left: 20px;
}

.tweetizen_embed a, .dijitDialog a {
     color:#173d65;
     text-decoration:none;
     cursor:pointer;
     cursor: hand;
}

.tweet {
     border-bottom: 1px solid #eaf0f2;
}

.tweet .profile_image {
     background: #fff none no-repeat center center;
     border: 1px solid #e8e5de;
}

.tweet .from_user {
     color: #42A7FD;
     font-size: 12px;
     font-weight: bold;
}

.tweet .from_user:hover {
     color: #3a93cc;
     border-bottom: 1px dashed #a8cde5;
}

.tweet .created_at {
     color: #5b5d68;
     font-size:11px;
}

.tweet a.user_link {color: #42A7FD;}

.tweet a.user_link:hover {color: #6f93aa;}

.tweet a.ext_link {color: #42A7FD;}

.tweet a.ext_link:hover {color: #6f93aa;}

.tweeter {
     height: 180px;
}

.tweeter .title {
     font-weight: bold;
     font-size:18px;
     text-transform:capitalize;
     margin: 0px 0 0 5px;
     font-family: Helvetica, Arial, sans-serif;
     color: #393b3c;
}

.tweeter .character_count {
     color: #d8d8d8;
     font-size: 35px;
     letter-spacing: -2px;
     font-weight: bold;
     text-align: right;
     margin: 0px 5px 0px 0;
     line-height: 40px;
}

.tweeter .character_count_over {
     color: #f73497;
}

.tweeter .tag_container .tag_title {
     color: #fff;
     font-weight: bold;
     font-size:11px;
     margin: 6px 0 3px 3px;
}

.tweeter .tag_container .tag {
     background-color: #303030;
     margin: 3px 0px 3px 5px;
     padding: 4px;
     color: #fff;
     font-size: 11px;
}

.tweeter .tag_container .tag:hover {
     background-color: #000000;
}

.tweeter .tag_container .tag_selected {
     background-color: #4cb4ea !important;
}

.tweeter .people_container .people_title {
     color: #fff;
     font-weight: bold;
     font-size:11px;
     margin: 3px 0 0 3px;
}

.tweeter .people_container .insert_person {
     background-color: #6c6c6c;
     margin-left: 7px;
     padding: 4px;
     color: #fff;
     font-size: 11px;
}

.tweeter .people_container .insert_person:hover {
     background-color: #00c0f3;
}

.tweet_list {
     font-size: 12px;
     background: #efefef;
     margin: 0 0px 15 5px;
}

.tweet_list_loading {
     background: #fff url('http://www.tweetizen.com/img/loading.gif') no-repeat center center;
     background-position: center 100px;
}

.tweet_list a,
.tweet_list a:active,
.tweet_list a:visited,
.tweet_list a:hover {
     text-decoration: none;
     color: #527299;
     border-bottom: 1px dashed transparent;
     font-weight: bold;
}

.tweet_list a:hover {
     border-bottom: 1px dashed #a8cde5;
}

.tweet_list .header .button {
     background-color: #747474;
     color: white;
     margin: 5px 4px 0 10px;
     padding: 2px 7px 3px 7px;
     cursor: pointer;
     cursor: hand;
}

.tweet_list .header .button:hover {
     background-color: #979797;
}

.tweet_list .header .button_selected {
     background-color: #979797 !important;
}

.tweet_list .pager .newer_link,
.tweet_list .pager .older_link {
     height: 22px;
     line-height: .5em;
     font-size: 14px;
     font-weight: bold;
     padding:6px 0;
     width: 275px;
}

.tweetizen_embed a:visited, .dijitDialog a:visited {color:#173d65;}

.tweetizen_embed a:hover, .dijitDialog a:hover {color:#1f6da3;}

.tweetizen_embed input.text, .dijitDialog input.text {
     padding: 5px;
     border: solid #B1AE9E 1px;
     color: #4C616F;
     font-family: 'Lucida Grande', sans-serif;
     font-size: 11pt;
}


.tweetizen_embed textarea,.dijitDialog textarea {
     font-family: 'Lucida Grande', sans-serif;
     font-size: 11pt;
     color: #4C616F;
     border: solid #B1AE9E 1px;
     padding: 5px;
}

.tweetizen_embed button, .tweetizen_embed input.button,.dijitDialog button, .dijitDialog input.button {
     border: solid #CCCCCC 1px;
     background-color: #E6E6E6;
     cursor: pointer;
     cursor: hand;
     font-size:x-small;
     padding:4px 8px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
}

.tweetizen_embed button:hover, .tweetizen_embed input.button:hover, .dijitDialog button:hover, .dijitDialog input.button:hover {background-color:#D5D5D5;}

gackerman43 0 Newbie Poster · Answer 2 · 2009-07-25T07:46:30+00:00

I got it to work by using: .embed_group, .embed_group .button { display: none !important; } Thanks!

MidiMagic 579 Nearly a Senior Poster · Answer 3 · 2009-07-29T10:49:08+00:00

MidiMagic 579 Nearly a Senior Poster

17 Years Ago

Don't put the style tags in an external style sheet.

CSS Div Element Question

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers