Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Tati
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 10
#1

Изменить внешний вид плагина WP - HTML, CSS

10.11.2015, 21:53. Просмотров 464. Ответов 6
Метки нет (Все метки)

Приветствую!

Мне нужно изменить внешний вид виджета Attach Files Widget для WP. А именно разместить прикрепленные файлы не один над другим, а на одном уровне по горизонтали.

http://www.cyberforum.ru/html/thread1312216.html
Файлы размещены в виде списка. Вот он код, который за это отвечает, как мне кажется.
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
    $out = '<div class="ex-attachments ex-attachments-not-widget-out"><ul class="ex-attachments-'.$icons.'icons">';
    $counter = 0;
 
    foreach($data as $element) {
 
        if ($limit > 0 && ($counter == $limit) ) {
            break;
        }
 
        $out .= '<li><a target="_blank" href="' . $element['link'].'">';
 
        if ($icons != 'no') {
            $path = parse_url( $element['link'], PHP_URL_PATH );
            $ext = strtolower( pathinfo( $path, PATHINFO_EXTENSION ) );
            if (!array_key_exists($ext, $filetype_icons))
                $ext = 'file';  // if no specific filetype icon, use a generic image
 
            $out .= '<img src="'.$assetsUrl.'/images/'.$filetype_icons[$ext].'.png" />';
        }
 
        $out .= '<div>'. $element['name'] .'</div></a>';
 
        if (!empty($element['description'])) {
            $out .= '<p>' . $element['description'] .'</p>';
        }
 
        $out .= '</li>';
        $counter++;
    }
 
 
    $out .= '</ul></div>';
Что мне нужно сделать, чтобы 3-4 файла прикрепленные появлялись рядом друг с другом (в одной горизонтальной линии)?
Спасибо!
0
Миниатюры
Изменить внешний вид плагина WP  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.11.2015, 21:53
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Изменить внешний вид плагина WP (HTML, CSS):

Как изменить внешний вид html5 аудио плеера
Добрый день, подскажите пожалуйста скрипт, для изменения внешнего вида аудио...

Необходимо изменить внешний вид сайта. Прошу совета
Доброго настроения, уважаемые форумчане! Прошу вашего совета, и желательно...

Изменить внешний вид календаря в контактной форме FS Contact Form
я не большой специалист в этом, но хотел бы узнать - возможно ли изменить...

Подрихтовать внешний вид
Есть сайт http://www.gromada.dn.ua/skifline2/index.php/en/. Лезет правый край...

Внешний вид меню
Почти закончив с созданием сайта, решил проверить его внешний вид в разных...

6
Azdeman
Фрилансер
Эксперт HTML/CSSЭксперт PHP
1734 / 1277 / 579
Регистрация: 12.01.2011
Сообщений: 5,074
10.11.2015, 22:06 #2
Это нужно менять в css файле.. здесь нет переноса строки в этом коде, но зато классы есть .
1
Tati
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 10
23.12.2015, 20:51  [ТС] #3
Никогда не меняла расположение элементов через CSS Непонятно, что в нем менять надо.... Поможете?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.ex-attachments {
  border-top: 2px solid #D5D5D5;
  }
  .ex-attachments li:first-child {
    display: none;
    }
  .ex-attachments li {
    padding: 8px 0 2px 2px;
    margin: 0;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    }
  .ex-attachments li > span {
    float: left;
    width: 15px;
    }
  .ex-attachments li > div {
    margin-left: 15px;
    }
  .ex-attachments a {
    text-decoration: none;
    }
  .ex-attachments li p {
    margin: 1px 0 !important;
    }
  .ex-attachments .remove{
    text-decoration: none;
    }
  .ex-attachments li:not(.default):before {
    }
  .ex-attachments li > span a {
    display: block;
    width: 15px;
    height: 15px;
    background-image: url('../images/arrows.png');
    }
  .ex-attachments li > span a.up {
    background-position: -4px -35px;
    }
  .ex-attachments li > span a.down {
    background-position: -4px -1px;
    }
0
СлаваВирус
468 / 396 / 169
Регистрация: 04.01.2013
Сообщений: 1,675
23.12.2015, 20:56 #4
CSS
1
2
3
4
5
6
7
.ex-attachments li {
padding: 8px 0 2px 2px;
margin: 0;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
display: inline-block;
}
Вроде так
1
Tati
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 10
29.12.2015, 21:28  [ТС] #5
Спасибо за ответ! Хотела попробывать, но... Плагин вообще перестал показывать второй файл. Должно быть после обновлений. Кто-нибудь может подсказать аналогичный плагин?

Добавлено через 3 часа 1 минуту
Попробовала Ваш код, ничего не изменилось
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.ex-attachments {
  border-top: 2px solid #D5D5D5;
  }
  .ex-attachments li:first-child {
    display: none;
    }
  .ex-attachments li {
    padding: 8px 0 2px 2px;
    margin: 0;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    display: inline-block;
    }
  .ex-attachments li > span {
    float: left;
    width: 15px;
    }
  .ex-attachments li > div {
    margin-left: 15px;
    }
  .ex-attachments a {
    text-decoration: none;
    }
  .ex-attachments li p {
    margin: 1px 0 !important;
    }
  .ex-attachments .remove{
    text-decoration: none;
    }
  .ex-attachments li:not(.default):before {
    }
  .ex-attachments li > span a {
    display: block;
    width: 15px;
    height: 15px;
    background-image: url('../images/arrows.png');
    }
  .ex-attachments li > span a.up {
    background-position: -4px -35px;
    }
  .ex-attachments li > span a.down {
    background-position: -4px -1px;
    }
Но все-равно спасибо за попытку помочь!
0
AmateR62
115 / 115 / 87
Регистрация: 24.02.2014
Сообщений: 405
30.12.2015, 12:04 #6
А если вот так попробовать:
CSS
1
2
3
4
5
6
7
.ex-attachments li {
padding: 8px 0 2px 2px;
margin: 0;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
float: left;
}
1
Tati
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 10
06.01.2016, 15:42  [ТС] #7
Предложенный Вами код сработал, спасибо!
Только вот выяснилось, что я меняла это в файле админпанели
Правильный файл вот он
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.ex-attachments-largeicons,
.ex-attachments-smallicons {
    list-style: none !important;
}
 
.ex-attachments-largeicons li {
    text-align: center;
}
 
.ex-attachments-largeicons img {
    width: 64px;
    height: 64px;
    opacity: 0.6;
}
 
.ex-attachments-largeicons li a:hover > img {
    opacity: 1;
}
 
.ex-attachments-largeicons div {
    margin-bottom: 20px;
}
 
.ex-attachments-smallicons img {
    float: left;
    width: 32px;
    height: 32px;
}
 
.ex-attachments-smallicons div {
    box-sizing: border-box;
    height: 32px;
    padding-top: 10px;
    margin-bottom: 10px;
}
 
.ex-attachments-noicons div {
    display: inline;
}
Я попыталась внести рекомендованные Вами поправки, но ничего не получилось. Поможете?
0
06.01.2016, 15:42
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.01.2016, 15:42
Привет! Вот еще темы с решениями:

Внешний вид(карскас)
Знающие люди помогите пожалуйста советом, а лучше и делом)) Только начал...

Внешний вид inpit с датой
Здравствуйте! есть форма на сайте (прикреплена картинка). type=&quot;date&quot; как...

Создать внешний вид страницы сайта
Помогите выполнить задание моего преподавателя : &quot;Добрый вечер. ...

Внешний вид копия файла справки
Здравствуйте, копию внешнего вида файла справки *. chm, приложенного + кнопка...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru